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

需求場景如下:

為錫林郭勒盟等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及錫林郭勒盟網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、做網(wǎng)站、錫林郭勒盟網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

實現(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("當(dāng)前滾動條位置:"+this.$refs.messagesContainer.scrollTop);
    console.log("當(dāng)前可滾動區(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("當(dāng)前滾動條位置:"+this.$refs.messagesContainer.scrollTop);
  console.log("當(dāng)前可滾動區(qū)域容器的高度:"+this.$refs.messagesContainer.scrollHeight);
}

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

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

總結(jié)

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

當(dāng)前標(biāo)題：Vue實現(xiàn)渲染數(shù)據(jù)后控制滾動條位置(推薦)
標(biāo)題鏈接：http://muchs.cn/article46/jpechg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、網(wǎng)站營銷、網(wǎng)站排名、靜態(tài)網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)