最近一個項目設計到了類似於一個在線客服聊天室需求。
使用的vue做的，需要將滾動條一直處於最下方，也就是一直展示最新的消息。
開始使用的原生js操作DOM 使scrollTop=scrollHeight 發現沒有效果。
后來發現scrolltop 一直比scrollHeight 少一條消息的高度。
說一下我聊天框實現的思路
聊天框遍歷一個對象數組的內容 數組里也就是消息對象
每當websocket傳過來一條新的消息我就把這個消息push到這個數組里面
vue就會動態遍歷這個數組 構建DOM元素
初步判定 當我們往數組里push一條數據的時候 DOM 並不會馬上更新，而是在異步隊列被清除，也就是下一個事件循環開始時執行更新時才會進行必要的DOM更新
我們獲取的還是沒有push前的DOM元素 所以一直差一條消息的高度
后來采取了這種方式
_this.$nextTick(()=>{ _this.$refs.chatmain.scrollTop= _this.$refs.chatmain.scrollHeight })
這里介紹一下 $nextTick 的作用
DOM更新后的一個回調函數 在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。
也就是說我們在push后使用這個函數 他會等待DOM刷新后再去執行里面的代碼 這樣我們里面就會獲取到最新的DOM 就不會差一個消息的高度
記得點贊關注哦！！！