完整教程：vue和uniapp聊天页面右侧滚动条自动到底部

1.vue右侧滚动条自动到底部

 与循环同级定义-->

定义方法

scrollToBottomCenter(){
  this.$nextTick(() => {
    this.$refs.newMessage1.scrollIntoView({ behavior: 'smooth' });
  });
},

在push到list数组内高度变化是调用scrollToBottomCenter这个方法

2.uniapp右侧滚动条自动到底部

..............

在data中定义

data() {
  return {
    scrollTop: 0,
  }
},

定义方法

scrollToBottom() {
  this.$nextTick(() => {
    const query = uni.createSelectorQuery().in(this)
    query.select('#chatMessages').fields({
      id: true,
      dataset: true,
      rect: true, // 获取布局信息
      size: true, // 获取宽高
      scrollOffset: true, // 获取滚动信息
      scrollHeight: true,
    },  (res) => {
      // console.log('完整节点信息:', res)
      if (res && res.scrollHeight) {
        this.scrollTop = res.scrollHeight
        // console.log('设置成功 scrollTop:', this.scrollTop)
      } else {
        console.warn('未获取到有效滚动信息', res)
      }
    }).exec()
  })
},

在push到alllist高度变化时调用scrollToBottom这个方法