vue聊天滚动到底部

vue聊天滚动到底部

技术框架：vue+即时通讯TIM
注意：this.$nextTick，这个方法是vue组建渲染完以后执行的方法（利用这个方法）
1.滚动到底部方法：

scrollMessageListToButtom() {
    
    
  let messageListNode = this.$refs['message-list']
  if (!messageListNode) {
    
    
    return
  }
// 元素.scrollTop(滚动高度) = 元素.scrollHeight(滚动条高度)
  messageListNode.scrollTop = messageListNode.scrollHeight
  this.preScrollHeight = messageListNode.scrollHeight
  this.isShowScrollButtomTips = false
  //         })
},

2.调用滚动到底部：

computed: {
    
    
  ...mapState({
    
    
    // 从vuex获取选中好友数据
    currentFriend(state) {
    
    
      return state.friend.currentFriend
    },
    // 从vuex获取聊天记录
    chatRecord(state) {
    
    
      this.chatRecorda = state.friend.chatRecord
      // 页面渲染完执行
      this.$nextTick(() => {
    
    
        this.scrollMessageListToButtom()
      })
      return state.friend.chatRecord
    }
  }),