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 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 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压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
JavaScript 学习 - 提高篇
2007/02/02 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
详解如何较好的使用js
2016/12/16 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
Angular8基础应用之表单及其验证
2019/08/11 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python格式化css文件的方法
2015/03/10 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python读写配置文件操作示例
2019/07/03 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
学习雷锋寄语大全
2014/04/11 职场文书
高三霸气励志标语
2014/06/24 职场文书
民族学专业求职信
2014/07/28 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL