Vue聊天框默認滾動到底部

功能場景

在開發中，我們總能遇到某些場景需要運用到聊天框，比如客服對話。如果你不是一名開發人員，可能你在使用QQ或者聊天工具的時候並沒有注意到，當你發出一條消息的時候，窗體會默認滾動到最底部，讓用戶可以看到最新的聊天消息。

實現原理

通過每一次的數據變化，只要數據變化，將滾動的最大高度賦值給滾動條的最大高度。
scrollHeight:滾動條高度
scrollTop: 距離最頂部高度

實現過程

在vue中

<!-- 這是一個簡易的范例，重點突出自動滾動底部 -->
<template>
  <div>
    <!-- 聊天窗體 -->
    <div class="test" id="gundong"></div>
    <!-- 輸入窗體 -->
    <el-input></el-input>
    <!-- 確認按鈕 -->
    <el-button @click="take">發送</el-button>
  </div>
</template>
<script>
export default {
  name: 'scroll',
  data () {
    return {
      chat: [
        {info: '聊天內容，觸發后push一個'}
      ]
    }
  },
  methods:{
    take () {
      let info = {info: '聊天內容，觸發后push一個'},
      this.chat.push(info)
      // 核心代碼
      // 滾動
      this.$nextTick(() => {
        let msg = document.getElementById('gundong') // 獲取對象
        msg.scrollTop = msg.scrollHeight // 滾動高度
      })
    }
  }
}
</script>
<style scoped>
.test{
  width:300px;
  height: 300px;
  overflow: auto;
}
</style>

核心內容

this.$nextTick(() => {
  let msg = document.getElementById('gundong') // 獲取對象
  msg.scrollTop = msg.scrollHeight // 滾動高度
})

了解一下$nextTick

$nextTick的執行條件是在DOM發生變化並且結束之后執行的一次回調。
vue在響應數據變化的時候並非在數據變化時DOM馬上變化，而是按照一定的生命周期進行進程進行變化的。
如果你用watch，你會發現，永遠只能監聽到最近的一條聊天記錄之上。似乎監聽不到數據變化。其實並不是，在watch是直接監聽data數據的變化情況，快於DOM，所以先行執行watch了。
那如果加上$nextTick的話，就能夠等到DOM變化完成之后再進行執行，有點類似timeout。

了解一下“scrollTop”and“scrollHeight”

scrollTop是滾動條的當前高度。默認是0
scrollHeight是滾動條的整體高度
只要動態修改滾動條到頂部的距離等於div的高度，那么久實現滾動條定位在底部了。