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”