快捷導(dǎo)航

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

更新時(shí)間：2019年12月09日 15:59:46 作者：神奇的程序員

這篇文章主要介紹了Vue實(shí)現(xiàn)渲染數(shù)據(jù)后控制滾動(dòng)條位置，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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

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

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

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

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

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)條的位置，講道理好像沒什么毛病，結(jié)果滾動(dòng)條的高度沒有預(yù)想的渲染。問題原因：數(shù)據(jù)渲染完成后，Vue此時(shí)還沒有渲染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);
}

正確的改變方式: 使用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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: