vue 發送消息聊天框發送最新的消息永遠再最底部


今天在寫這個需求的時候 直接就用了

element.scrollTop = element.scrollHeight
發現最后總數會差一點像素到最底部
每次滾動條沒有滑動到最底部,而是底部還有一條信息被隱藏
 
問題分析:
由於vue采用虛擬dom,我每次生成新的消息時獲取到的div的scrollHeight的值是生成新消息之前的值,所以造成每次都是最新的那條消息被隱藏掉了!為了論證我的分析是正確的特意做個試驗,把每次vue在重新渲染dom的前后時間點和DIV的scrollHeight打印出來以做對比:
  

 

 確實有偏差

使用 this.$nextTick()就好了


免責聲明!

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



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