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 相关文章推荐
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
javascript 动态创建表格
Jan 08 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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
destoon各类调用汇总
2014/06/20 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
php防止sql注入的方法详解
2017/02/20 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
javascript整除实现代码
2010/11/23 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
详解Vue之计算属性
2020/06/20 Javascript
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python文件去除注释的方法
2015/05/25 Python
Python的time模块中的常用方法整理
2015/06/18 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
详解python中index()、find()方法
2019/08/29 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
公司综合部的成员自我评价分享
2013/11/05 职场文书
优秀学生自我鉴定范例
2013/12/18 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
物业总经理岗位职责
2014/02/28 职场文书
淘宝好评语大全
2014/05/05 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
大学升旗仪式主持词
2015/07/04 职场文书