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

在使用vue实现聊天页面的时候，聊天数据动态加到页面中，需要实现滚动条也自动滚动到底部。这时我找到网上有个插件 vue-chat-scroll

但是安装后发现是用不了的，报错信息如下：

VM14383:27 [Vue warn]: Failed to resolve directive: chat-scroll

(found in )

这个一直找不到原因，可能是我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实现动态添加数据滚动条自动滚动到底部的示例代码...相关推荐

jsp ajax动态添加数据,jquery Ajax实现Select动态添加数据
jquery Ajax实现Select动态添加数据,具体内容如下 1.背景最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框中的数据都是固定的或者直接在jsp中读取列表值 ...
vue知识点详解，Vue之v-prev、vue-virtual-scroll-list、alise、data动态添加数据、v-for中的key值等
1.没有vue语法的v-prev 给模版中静态html添加该指令,表示不需要重复编译.(可以极大的加快编译速度) 2.vue-virtual-scroll-list虚拟插件,用于长列表,几十万的数据也 ...
【javascript 动态添加数据到 HTML 页面】
今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...
vue中给v-for渲染的元素动态添加移除类名
vue中给v-for渲染的元素动态添加移除类名今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以直接 ...
C#chart绘折线图动态添加数据
C#入门基础,实现chart控件动态添加数据源程序https://download.csdn.net/download/qq_42237381/10742048 目录一.效果示意二.原理说明三 ...
Elasticsearch的智能判断：动态添加数据映射
Solr在新增数据时,只能使用提前配置好映射属性的字段,否则就会报错. 不过在Elasticsearch中并没有这样的规定. 事实上Elasticsearch非常智能,你不需要给索引库设置任何mapp ...
关于用java编写生成word文档，动态添加数据到word文档的一些心得
关于用java编写生成word文档,动态添加数据到word文档的一些心得,经过翻阅了无数的有用的和无用的资料以后,总算找到了一种靠谱的方法 1.概述经过反反复复的查阅资料,总算找到了一个靠谱的生成w ...
【转载】让DIV的滚动条自动滚动到最底部的3种方法
转载自:脚本之家 → 网络编程 → JavaScript → javascript技巧 → 让DIV的滚动条自动滚动到最底部的3种方法(推荐) http://www.jb51.net/article ...
点击li,ul滚动条自动滚动到顶部，怎么解决分享。el-tooltip的focusing不要display：none,隐藏就行
点击li,ul滚动条自动滚动到顶部,怎么解决分享.el-tooltip的focusing不要display:none,隐藏就行

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

vue 实现数据滚动显示_vue实现动态添加数据滚动条自动滚动到底部的示例代码...相关推荐

最新文章

热门文章