uniapp聊天弹窗自动滚动

### 实现 UniApp 聊天窗口消息自动滚动 为了实现在 UniApp 中聊天窗口的消息能够随着新消息的到来而自动滚动到最新位置，可以利用 `scroll-view` 组件及其属性来完成这一需求。每当有新的消息被添加至会话列表时，通过设置 `scrollTop` 属性使视图滚向底部。 #### HTML 结构设计 定义一个用于显示对话的历史记录容器，并为其配置必要的参数以便于控制其行为： ```html <template> <view class="chat-container"> <!-- 对话框 --> <scroll-view :scroll-y="true" :scroll-top="scrollTop" @touchmove.stop.prevent catchtouchmove="true" style="height: calc(100vh - 80rpx); overflow:hidden;"> <block v-for="(item, index) in messageList" :key="index"> <view class="message-item">{{ item.content }}</view> </block> </scroll-view> <!-- 输入区 --> <view class="input-area"> <input type="text" placeholder="请输入..." v-model.trim="newMessage"/> <button size="mini" @click="sendMessage">发送</button> </view> </view> </template> ``` #### JavaScript 部分逻辑处理 初始化页面数据结构并编写相应方法响应用户的交互操作以及更新界面状态： ```javascript <script> export default { data() { return { scrollTop: 0, newMessage: '', messageList: [] }; }, methods: { sendMessage() { if (this.newMessage === '') {return;} this.messageList.push({ content: this.newMessage }); setTimeout(() => { const query = uni.createSelectorQuery().in(this); let view; // 获取最后一个子元素的位置信息 query.select('.message-item:last-child').boundingClientRect(data => { if (!data || !this.$refs.scrollView) {return;} // 更新 scroll-view 的 scrollTop 值使其滚动到底部 this.scrollTop += data.bottom; }).exec(); this.newMessage = ''; }, 50); } }, watch: { 'messageList': function(newValue){ // 当消息列表发生变化时触发此函数 this.chatScrollTop(); } } } </script> ``` 上述代码片段展示了如何监听消息数组的变化，在每次变化之后调用自定义的 `chatScrollTop()` 函数[^3]。该函数负责计算最新的偏移量并将它赋给 `scrollTop` 变量从而达到平滑过渡的效果。