vue实现动态添加数据滚动条自动滚动到底部的示例代码
在使用vue实现聊天页面的时候，聊天数据动态加到页面中，需要实现滚动条也自动滚动到底部。这时我找到网上有个插件vue-chat-scroll
https://www.npmjs.com/package/vue-chat-scroll
但是安装后发现是用不了的，报错信息如下：
VM14383:27[Vuewarn]:Failedtoresolvedirective:chat-scroll
(foundin)
这个一直找不到原因，可能是我vue的版本是2.2不支持吧。。。后来找到一个解决办法：
添加watch方法，监听数据变量的变化，动态添加滚动条，一开始我代码如下：
watch:{
chatlog(){
varcontainer=this.$el.querySelector("#chatContainer");
console.log(container);
container.scrollTop=container.scrollHeight;
}
}
但是发现滚动条都是滚动到倒数第二条数据上，所以需要如下代码来解决：
watch:{
chatlog(){
console.log("chatlogchange");
this.$nextTick(()=>{
varcontainer=this.$el.querySelector("#chatContainer");
console.log(container);
container.scrollTop=container.scrollHeight;
})
//document.getElementById('chatContainer').scrollTop=document.getElementById('chatContainer').scrollHeight+150;
}
}
相应在ul中添加一个id属性为chatContainer
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。