微信小程序聊天界面进入自动滚动到底部，翻看历史聊天记录，收到的新消息不会马上置底，如收到新消息出现底部有更多消息字样

最新推荐文章于 2025-03-19 14:40:43 发布

God_qsang

最新推荐文章于 2025-03-19 14:40:43 发布

阅读量3k

点赞数 2

文章标签：微信小程序 webview 小程序

本文链接：https://blog.csdn.net/God_qsang/article/details/123407783

版权

本文介绍了微信小程序中聊天界面的实现，包括自动滚动到底部以显示新消息，以及在查看历史记录时如何处理新消息提示。在接收到新消息时，聊天记录会自动更新并显示'底部有新消息'字样，用户可以点击该提示立即滚动到最新消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重点看标红部分，其他代码只是写的上下逻辑，可忽略

wxml:

<scroll-view scroll-y="{ {true}}" scroll-with-animation="{ {true}}" scroll-into-view="{ {scrollBottom}}" class="barrage" bindscrolltolower="scrollBottomMet">

<text decode="{ {true}}" style="{ {item.msgType==2?'color:orange':item.msgType==3?'color:green':item.isManage==1?'color:red':item.isSelf?'':'color:yellow'}}">{ {item.nickName}}{ {item.msgType=