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 相关文章推荐
javascript 动态生成私有变量访问器
Dec 06 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 Javascript
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统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
python实现批量按比例缩放图片效果
2018/03/30 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
Python 学习教程之networkx
2019/04/15 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
Pandas的Apply函数具体使用
2020/07/21 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
Foreo国际站:Foreo International
2018/10/29 全球购物
2016党员读书思廉心得体会
2016/01/23 职场文书