Vue實(shí)現(xiàn)渲染數(shù)據(jù)后控制滾動(dòng)條位置(推薦)

發(fā)布時(shí)間：2020-10-04 12:48:07 來(lái)源：腳本之家閱讀：1111 作者：神奇的程序員欄目：web開發(fā)

需求場(chǎng)景如下:

實(shí)現(xiàn)了消息發(fā)送，如果容器內(nèi)消息過(guò)多，會(huì)出現(xiàn)滾動(dòng)條，最新的消息位于最底部，不能及時(shí)出現(xiàn)在可視區(qū)域內(nèi)，此時(shí)就需要在渲染列表后，將滾動(dòng)條的位置定位到最底部。先來(lái)看看最終實(shí)現(xiàn)的效果

實(shí)現(xiàn)思路

渲染完數(shù)據(jù)后，通過(guò)refs對(duì)象獲取消息容器的實(shí)際高度
將滾動(dòng)條的設(shè)置到最底部

實(shí)現(xiàn)過(guò)程

sendMessage: function (event) {
  // 數(shù)據(jù)渲染
  this.senderMessageList.push(thisSenderMessageObj);
  // 改變滾動(dòng)條位置
  this.messagesContainerTimer = setTimeout(()=>{
    this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
    console.log("當(dāng)前滾動(dòng)條位置:"+this.$refs.messagesContainer.scrollTop);
    console.log("當(dāng)前可滾動(dòng)區(qū)域容器的高度:"+this.$refs.messagesContainer.scrollHeight);
    // 清理定時(shí)器
    clearTimeout(this.messagesContainerTimer);
  },0);
}

踩坑記錄

直接設(shè)置滾動(dòng)條的位置

數(shù)據(jù)渲染完成后直接獲取元素的真實(shí)高度，設(shè)置滾動(dòng)條的位置，講道理好像沒(méi)什么毛病，結(jié)果滾動(dòng)條的高度沒(méi)有預(yù)想的渲染。問(wèn)題原因：數(shù)據(jù)渲染完成后，Vue此時(shí)還沒(méi)有渲染DOM元素，設(shè)置的滾動(dòng)條高度還是之前的容器高度。

sendMessage: function (event) {
  // 數(shù)據(jù)渲染
  this.senderMessageList.push(thisSenderMessageObj);
  // 改變滾動(dòng)條位置
  this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
  console.log("當(dāng)前滾動(dòng)條位置:"+this.$refs.messagesContainer.scrollTop);
  console.log("當(dāng)前可滾動(dòng)區(qū)域容器的高度:"+this.$refs.messagesContainer.scrollHeight);
}

Vue實(shí)現(xiàn)渲染數(shù)據(jù)后控制滾動(dòng)條位置(推薦)

正確的改變方式: 使用setTimeout()，將DOM操作改為異步。

this.messagesContainerTimer = setTimeout(()=>{
  this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
  console.log("當(dāng)前滾動(dòng)條位置:"+this.$refs.messagesContainer.scrollTop);
  console.log("當(dāng)前可滾動(dòng)區(qū)域容器的高度:"+this.$refs.messagesContainer.scrollHeight);
  // 清理定時(shí)器
  clearTimeout(this.messagesContainerTimer);
},0);

總結(jié)

以上所述是小編給大家介紹的Vue實(shí)現(xiàn)渲染數(shù)據(jù)后控制滾動(dòng)條位置，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

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

Vue實(shí)現(xiàn)渲染數(shù)據(jù)后控制滾動(dòng)條位置(推薦)

猜你喜歡

最新資訊

相關(guān)推薦

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