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 相关文章推荐
异步加载script的代码
Jan 12 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
AngularJS语法详解
Jan 23 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
pm2启动ssr失败的解决方法
Jun 29 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 自定义错误处理函数trigger_error()
2013/03/26 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
获取URL文件名后缀
2013/10/24 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
python 正则式 概述及常用字符
2009/05/07 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
物理教育专业毕业生推荐信
2013/11/03 职场文书
中医药大学毕业生自荐信
2013/11/08 职场文书
创业计划书六个要素
2013/12/26 职场文书
小学教师师德反思
2014/02/03 职场文书
高中教师评语大全
2014/04/25 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
聘任证明怎么写
2015/03/02 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL