最近在写一个聊天界面,准备用vue来写,写到收发消息,滚动条自动滚动到底部,用户/客服始终看到最新的消息,第一个首先想到的是用jq,hahaha~,下面是vue的方法,特此记录,以备后用

template

<div class="extChat_left_top" ref="chatbox">
<!--do something-->
</div>

methods

goBottom(e) {
    e.scrollTop = e.scrollHeight
}

watch(监听数据的变化,从而改变滚动条的位置)

watch: {
  messages: function() {
    this.$nextTick(function() {
      let e = this.$refs.chatbox;
      this.goBottom(e);
    })
  }
}

扫描二维码,在手机上阅读!