快捷導(dǎo)航

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

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

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

需求場景如下:

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

實現(xiàn)思路

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

實現(xiàn)過程

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

踩坑記錄

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

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

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

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

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

總結(jié)

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

您可能感興趣的文章: