关于uniapp开发微信小程序，实现聊天消息最新消息最底部展示
实现消息最底部展示
uniapp\vue
页面布局
此处我觉得最要注意的点就是看是谁产生的滚动条。
逻辑书写
关键字： scrollTop,scrollHeight
methods:{
scrollChat(){
//利用了$nextTick,dom完成后才运行的函数
this.$nextTick(()=>{
//此处非常需要注意的是，dom元素必须是产生滚动条的那个dom，不然会失效，获取不了滚动条的高度
//就这一个问题我反复尝试，才发现的这个问题
let container = document.querySelector('#chat');
container.scrollTop = container.scrollHeight;
console.log('container.scrollHeight', container.scrollHeight, 'container.scrollTop', container.scrollTop);
})
}
}，
mounted() {
// 页面首次展示时滚动条定位底部
this.scrollChat()
},
updated() {
// 在接收到新消息的时候触发方法将滚动条定位到底部
this.scrollChat()
},
最终效果展示
文章来源：https://www.toymoban.com/news/detail-706684.html
录制的聊天功能文章来源地址https://www.toymoban.com/news/detail-706684.html
到了这里，关于关于uniapp开发微信小程序，实现聊天消息，最新消息最底部展示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
