当前位置: 首页 > 编程笔记 >

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

李弘光
2023-03-14
本文向大家介绍vue实现动态添加数据滚动条自动滚动到底部的示例代码,包括了vue实现动态添加数据滚动条自动滚动到底部的示例代码的使用技巧和注意事项,需要的朋友参考一下

在使用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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍JS JQUERY实现滚动条自动滚到底的方法,包括了JS JQUERY实现滚动条自动滚到底的方法的使用技巧和注意事项,需要的朋友参考一下 设置页面加载时滚动条自动滚到底的方法: jQuery: JavaScript: 以上2种方法均可以实现页面加载时滚动条自动滚动到底,小伙伴们根据自己的实际需求,自由选择吧

  • 本文向大家介绍js实现滚动条滚动到页面底部继续加载,包括了js实现滚动条滚动到页面底部继续加载的使用技巧和注意事项,需要的朋友参考一下 这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理,遇到一些小知识点可以分析一下也算有所得。 原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部,如果

  • 现在的情况是:当内部滚动条滚动到底部时如果继续滚动,外部滚动条不会滚动,需要停顿或者移动鼠标滚动才能触发外层滚动条

  • 问题内容: 考虑我有一个问题清单。当我单击第一个问题时,它应该自动带我到页面底部。 实际上,我确实知道可以使用jQuery完成此操作。 因此,您能为我提供一些文档或一些链接,以找到该问题的答案吗? 编辑:需要滚动到页面底部的特定HTML 元素 问题答案: 不需要jQuery。我从Google搜索获得的大多数热门结果都给了我这个答案: 在嵌套元素的地方,文档可能不会滚动。在这种情况下,您需要定位要滚

  • 我有一个问题清单。当我点击第一个问题时,它应该会自动把我带到页面底部。 事实上,我确实知道这可以使用jQuery来完成。 所以,你能给我一些文件或一些链接,我可以找到这个问题的答案吗? 编辑:需要滚动到页面底部的特定HTML元素

  • 本文向大家介绍基于javascript实现浏览器滚动条快到底部时自动加载数据,包括了基于javascript实现浏览器滚动条快到底部时自动加载数据的使用技巧和注意事项,需要的朋友参考一下 废话不多说了,直接给大家贴js代码了。 ps:原生JavaScript如何触发滚动条事件?

  • 本文向大家介绍android scrollview 自动滚动到顶部或者底部的实例,包括了android scrollview 自动滚动到顶部或者底部的实例的使用技巧和注意事项,需要的朋友参考一下 android scrollview 自动滚动到顶部或者底部 摘要: android scrollview 自动滚动到顶部或者底部 android scrollview 自动滚动到顶部或者底部  还有一种

  • 本文向大家介绍vue 纯js监听滚动条到底部的实例讲解,包括了vue 纯js监听滚动条到底部的实例讲解的使用技巧和注意事项,需要的朋友参考一下 在网页中,我们会遇到很多在滚动条到底部的时候有数据正在加载的事件,那么怎样用vue去实现这样的内容呢?本篇只给出一个雏形,结合vue的生命周期用纯javascript写的一个监听函数,后续操作数据库的部分暂且不议。 1、怎样用纯js判断滚动条是否到底部?