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