vue實(shí)現(xiàn)動(dòng)態(tài)添加數(shù)據(jù)滾動(dòng)條自動(dòng)滾動(dòng)到底部的示例代碼

發(fā)布時(shí)間：2020-09-05 14:39:15 來(lái)源：腳本之家閱讀：337 作者：_小小黑欄目：web開(kāi)發(fā)

在使用vue實(shí)現(xiàn)聊天頁(yè)面的時(shí)候，聊天數(shù)據(jù)動(dòng)態(tài)加到頁(yè)面中，需要實(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不支持吧。。。后來(lái)找到一個(gè)解決辦法：

添加watch方法，監(jiān)聽(tīng)數(shù)據(jù)變量的變化，動(dòng)態(tài)添加滾動(dòng)條，一開(kāi)始我代碼如下：

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ù)上，所以需要如下代碼來(lái)解決：

 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í)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

vue實(shí)現(xiàn)動(dòng)態(tài)添加數(shù)據(jù)滾動(dòng)條自動(dòng)滾動(dòng)到底部的示例代碼

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽