vue實現(xiàn)動態(tài)添加數(shù)據(jù)滾動條自動滾動到底部的示例代碼
更新時間：2018年07月06日 09:51:22 作者：_小小黑
本篇文章主要介紹了vue實現(xiàn)動態(tài)添加數(shù)據(jù)滾動條自動滾動到底部的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在使用vue實現(xiàn)聊天頁面的時候，聊天數(shù)據(jù)動態(tài)加到頁面中，需要實現(xiàn)滾動條也自動滾動到底部。這時我找到網(wǎng)上有個插件 vue-chat-scroll
https://www.npmjs.com/package/vue-chat-scroll
但是安裝后發(fā)現(xiàn)是用不了的，報錯信息如下：
VM14383:27 [Vue warn]: Failed to resolve directive: chat-scroll
(found in <Hello>)
這個一直找不到原因，可能是我vue的版本是2.2不支持吧。。。后來找到一個解決辦法：
添加watch方法，監(jiān)聽數(shù)據(jù)變量的變化，動態(tài)添加滾動條，一開始我代碼如下：
watch: {
chatlog() {
var container = this.$el.querySelector("#chatContainer");
console.log(container);
container.scrollTop = container.scrollHeight;
}
}
但是發(fā)現(xiàn)滾動條都是滾動到倒數(shù)第二條數(shù)據(jù)上，所以需要如下代碼來解決：
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
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
下面小編就為大家分享一篇Vue2 模板template的四種寫法總結，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)短信驗證碼輸入框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04
這篇文章主要介紹了vue下使用nginx刷新頁面404的問題解決,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
Vue-router 中hash模式和history模式的區(qū)別
這篇文章主要介紹了Vue-router 中hash模式和history模式的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue3?setup中父組件通過Ref調(diào)用子組件的方法(實例代碼)
這篇文章主要介紹了vue3?setup中父組件通過Ref調(diào)用子組件的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了如何使用yarn創(chuàng)建vite項目+vue3,詳細介紹了使用vite創(chuàng)建vue3過程,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要介紹了淺談Vue使用Elementui修改默認的最快方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
解決vue中修改export default中腳本報一大堆錯的問題
今天小編就為大家分享一篇解決vue中修改export default中腳本報一大堆錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue3子組件watch無法監(jiān)聽父組件傳遞的屬性值的解決方法
這篇文章主要介紹了Vue3子組件watch無法監(jiān)聽父組件傳遞的屬性值的解決方法,文中通過代碼示例講解的講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了Vue 簡單實現(xiàn)前端權限控制的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12