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 相关文章推荐
JavaScript使用prototype定义对象类型(转)[
Dec 22 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 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的分页功能
2007/03/21 PHP
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
简单介绍Python中的RSS处理
2015/04/13 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
python生成圆形图片的方法
2020/03/25 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
2014年社区重阳节活动策划方案
2014/09/16 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
Python中time与datetime模块使用方法详解
2022/03/31 Python