最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

vue实现动态添加数据滚动条自动滚动到底部的示例代码

来源:动视网 责编:小采 时间:2020-11-27 22:11:56
文档

vue实现动态添加数据滚动条自动滚动到底部的示例代码

vue实现动态添加数据滚动条自动滚动到底部的示例代码:在使用vue实现聊天页面的时候,聊天数据动态加到页面中,需要实现滚动条也自动滚动到底部。这时我找到网上有个插件 vue-chat-scroll https://www.npmjs.com/package/vue-chat-scroll 但是安装后发现是用不了的,报错信息如下: VM14383:27 [V
推荐度:
导读vue实现动态添加数据滚动条自动滚动到底部的示例代码:在使用vue实现聊天页面的时候,聊天数据动态加到页面中,需要实现滚动条也自动滚动到底部。这时我找到网上有个插件 vue-chat-scroll https://www.npmjs.com/package/vue-chat-scroll 但是安装后发现是用不了的,报错信息如下: VM14383:27 [V


这个一直找不到原因,可能是我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

文档

vue实现动态添加数据滚动条自动滚动到底部的示例代码

vue实现动态添加数据滚动条自动滚动到底部的示例代码:在使用vue实现聊天页面的时候,聊天数据动态加到页面中,需要实现滚动条也自动滚动到底部。这时我找到网上有个插件 vue-chat-scroll https://www.npmjs.com/package/vue-chat-scroll 但是安装后发现是用不了的,报错信息如下: VM14383:27 [V
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top