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 数据类型转换总结笔记
Jan 17 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
微信小程序利用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
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
json对象转字符串如何实现
2012/12/02 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
layui清空,重置表单数据的实例
2019/09/12 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python监控文件或目录变化
2016/06/07 Python
python多进程控制学习小结
2018/10/31 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
好的自荐信的要求
2013/10/30 职场文书
校园活动宣传方案
2014/03/28 职场文书
党员个人总结自评
2015/02/14 职场文书