vue实现动态添加数据滚动条自动滚动到底部的示例代码


Posted in Javascript onJuly 06, 2018

在使用vue实现聊天页面的时候,聊天数据动态加到页面中,需要实现滚动条也自动滚动到底部。这时我找到网上有个插件 vue-chat-scroll

https://www.npmjs.com/package/vue-chat-scroll

但是安装后发现是用不了的,报错信息如下:

VM14383:27 [Vue warn]: Failed to resolve directive: chat-scroll
(found in <Hello>)

这个一直找不到原因,可能是我vue的版本是2.2不支持吧。。。后来找到一个解决办法:

添加watch方法,监听数据变量的变化,动态添加滚动条,一开始我代码如下:

watch: {
  chatlog() {
    var container = this.$el.querySelector("#chatContainer");
    console.log(container);
    container.scrollTop = container.scrollHeight;
   }
 }

但是发现滚动条都是滚动到倒数第二条数据上,所以需要如下代码来解决:

watch: {
  chatlog() {
   console.log("chatlog change");
   this.$nextTick(() => {
    var container = this.$el.querySelector("#chatContainer");
    console.log(container);
    container.scrollTop = container.scrollHeight;
   })
   // document.getElementById('chatContainer').scrollTop = document.getElementById('chatContainer').scrollHeight+150;

  }
 }

相应在ul中添加一个id属性为chatContainer

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 #Javascript
用Node提供静态文件服务的方法
Jul 06 #Javascript
vue使用监听实现全选反选功能
Jul 06 #Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 #Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 #Javascript
javascript显示动态时间的方法汇总
Jul 06 #Javascript
Django+Vue跨域环境配置详解
Jul 06 #Javascript
You might like
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
python cookielib 登录人人网的实现代码
2012/12/19 Python
python方向键控制上下左右代码
2018/01/20 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
python中partial()基础用法说明
2018/12/30 Python
python导入坐标点的具体操作
2019/05/10 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
室内设计自我鉴定
2013/10/15 职场文书
应届毕业生个人自荐信范文
2013/11/30 职场文书
自荐信格式
2013/12/01 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫