Vue实现渲染数据后控制滚动条位置(推荐)
2019-12-10 07:10
633 查看
需求场景如下:
实现了消息发送,如果容器内消息过多,会出现滚动条,最新的消息位于最底部,不能及时出现在可视区域内,此时就需要在渲染列表后,将滚动条的位置定位到最底部。先来看看最终实现的效果
实现思路
- 渲染完数据后,通过refs对象获取消息容器的实际高度
- 将滚动条的设置到最底部
实现过程
sendMessage: function (event) { // 数据渲染 this.senderMessageList.push(thisSenderMessageObj); // 改变滚动条位置this.messagesContainerTimer = setTimeout(()=>{ this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight; console.log("当前滚动条位置:"+this.$refs.messagesContainer.scrollTop); console.log("当前可滚动区域容器的高度:"+this.$refs.messagesContainer.scrollHeight); // 清理定时器 clearTimeout(this.messagesContainerTimer); },0); }
踩坑记录
直接设置滚动条的位置
数据渲染完成后直接获取元素的真实高度,设置滚动条的位置,讲道理好像没什么毛病,结果滚动条的高度没有预想的渲染。问题原因:数据渲染完成后,Vue此时还没有渲染DOM元素,设置的滚动条高度还是之前的容器高度。
sendMessage: function (event) { // 数据渲染 this.senderMessageList.push(thisSenderMessageObj); // 改变滚动条位置 this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight; console.log("当前滚动条位置:"+this.$refs.messagesContainer.scrollTop); console.log("当前可滚动区域容器的高度:"+this.$refs.messagesContainer.scrollHeight); }
正确的改变方式: 使用setTimeout(),将DOM操作改为异步。
this.messagesContainerTimer = setTimeout(()=>{ this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight; console.log("当前滚动条位置:"+this.$refs.messagesContainer.scrollTop); console.log("当前可滚动区域容器的高度:"+this.$refs.messagesContainer.scrollHeight); // 清理定时器 clearTimeout(this.messagesContainerTimer); },0);
总结
以上所述是小编给大家介绍的Vue实现渲染数据后控制滚动条位置,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- vue中实现先请求数据再渲染dom
- vue移动端实现返回主页滚动条在上次浏览的位置
- vue中实现先请求数据再渲染dom分享
- vue使用keep-alive保持滚动条位置的实现方法
- vue 小案例 获取数据渲染页面 实现文章标题搜索功能
- 使用js函数实现的通过输入框中数据的长度来控制光标聚焦位置
- vue实现动态添加数据滚动条自动滚动到底部的示例代码
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二九║ Nuxt实战:异步实现数据双端渲染
- vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
- Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面
- vue 滚动条实现平滑滚动到某个位置
- 使用js函数实现的通过输入框中数据的长度来控制光标聚焦位置
- 基于go+vue实现的golang每日新闻数据浏览与检索平台(推荐)
- Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
- vue通过 vue.mixin(混合)实现 任意页面记录滚动条位置(路由router.query参数一致) 并跳转到上次的位置
- Vue路由请求数据实现新闻列表及详情页的渲染
- 基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
- 利用vue-router的动态路由和路由传值实现同一模板渲染不同数据
- vue.js实现数据库的JSON数据输出渲染到html页面功能示例
- vue实现动态添加数据滚动条自动滚动到底部