Vue实现渲染数据后控制滚动条位置(推荐)


Posted in Javascript onDecember 09, 2019

需求场景如下:

实现了消息发送,如果容器内消息过多,会出现滚动条,最新的消息位于最底部,不能及时出现在可视区域内,此时就需要在渲染列表后,将滚动条的位置定位到最底部。先来看看最终实现的效果

Vue实现渲染数据后控制滚动条位置(推荐)  

实现思路

  • 渲染完数据后,通过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);
}

Vue实现渲染数据后控制滚动条位置(推荐)

正确的改变方式: 使用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实现渲染数据后控制滚动条位置,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
一个js实现的所谓的滑动门
May 23 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
微信小程序如何使用云开发
May 17 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
element-ui如何防止重复提交的方法步骤
Dec 09 #Javascript
js刷新页面location.reload()用法详解
Dec 09 #Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 #Javascript
Vue extend的基本用法(实例详解)
Dec 09 #Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 #Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 #Javascript
vue如何使用async、await实现同步请求
Dec 09 #Javascript
You might like
php 执行系统命令的方法
2009/07/07 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
Python工程师面试必备25条知识点
2018/01/17 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python读取YAML文件过程详解
2019/12/30 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
实例代码讲解Python 线程池
2020/08/24 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
求职信结尾怎么写
2014/05/26 职场文书
小学生学习保证书
2015/02/26 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
护士工作心得体会
2016/01/25 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript
python游戏开发之pygame实现接球小游戏
2022/04/22 Python
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL