vue 內容增加滾動條自動定位至底部


this.$nextTick(() => {
        document.body.scrollTop = document.body.scrollHeight;
        console.log(document.body.scrollTop);
});

 數據改變之后,DOM 並沒有立即發生變化,所以 document.body.scrollTop 還是上一次 DOM更新之后的值。

Vue 實現響應式並不是數據發生變化之后 DOM 立即變化,而是按一定的策略進行 DOM 的更新。$nextTick 是在下次 DOM 更新循環結束之后執行延遲回調,在修改數據之后使用。

再次修改之后的代碼如下,可以實現自動定位到對話頁面的底部,但是還有一個小問題,就是輸入新的對話信息之后會出現閃屏的現象,可以通過設置延時來解決。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM