uniapp聊天界面滚动条自动置底

scroll-into-view实现

很简单， 只需要设置锚点即可，每次发送滚动到最后一个锚点

            
                
                
            

发送

onSend() {
        this.itemKey = ""; // 先清除，否则相同的key不会触发锚点滚动
        this.$nextTick(() => {
            let last = this.list[this.list.length - 1]
            this.itemKey = ('item' + last.id)
        })
},

注意：scroll-into-view绑定的key不能以数字开头，所以这里在开头拼接了一个"item"字符串

scroll-top实现

你也可以使用scroll-top属性来实现，不过scroll-top需要计算滚动高度，可能复杂点

            
                
                
            

发送

export default {
        data() {
            return {
                scrollTop： 0
            }
        },
  methods: {
    onSend() {
      this.scrollTop = 99999; // 设置一个最大值，滚动到底部
    },
  }
}

当然上面scrollTop设置最大值是一个示例，你需要获取滚动盒子的高度以及内部box的高度

export default {
        data() {
            return {
                scrollTop： 0
            }
        },
  methods: {
    onSend() {
          this.$nextTick(()=>{
                uni.createSelectorQuery().in(this).select('#scroll-view-content').boundingClientRect((res)=>{
                    // res会返回当前元素的宽高
          // 计算scrollTop = res.height - scroll-view的高度
          // 最终返回的结果就是scrollTop最终的触底高度
                }).exec()
            })
    },
  }
}

---

参考文档：
scroll-into-view