vue实现动态添加数据滚动条自动滚动到底部的示例代码_vue实现页面动态添加新页面资源-CSDN下载

5星 · 超过95%的资源 178 浏览量 2021-01-19 19:52:27 上传评论收藏 29KB PDF 举报

资源详情

资源评论

资源推荐

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论10

马克love

2023-06-11

这个示例代码很实用，可以被广泛地应用到各种项目中。

内容反馈

weixin_38516863

粉丝: 3

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip