Vue聊天框默認滾動到底部

功能場景

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

實現原理

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

實現過程

在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

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

瞭解一下`$nextTick`

$nextTick的執行條件是在DOM發生變化而且結束以後執行的一次回調。 vue在響應數據變化的時候並不是在數據變化時DOM立刻變化，而是按照必定的生命週期進行進程進行變化的。若是你用watch，你會發現，永遠只能監聽到最近的一條聊天記錄之上。彷佛監聽不到數據變化。其實並非，在watch是直接監聽data數據的變化狀況，快於DOM，因此先行執行watch了。那若是加上$nextTick的話，就可以等到DOM變化完成以後再進行執行，有點相似timeout。spa

瞭解一下「scrollTop」and「scrollHeight」