必须为v-for添加唯一key，否则导致气泡错位、文字重叠、点击错乱；左右对齐应通过class控制而非动态style；微信小程序三角不显示需设overflow:visible并避免transform定位；滚动到底部需$nexttick+settimeout+selectquery组合确保dom渲染完成。
uni-app 中用 v-for 渲染消息气泡必须加 key
不加 key 会导致气泡错位、文字重叠、点击响应错乱，尤其在快速收发多条消息时明显。uni-app 的 diff 算法依赖 key 做节点复用，消息列表里每条消息的唯一标识（比如 msgId 或时间戳+序号）必须作为 key 值。
常见错误写法：<view v-for="(item, i) in list" :key="i"></view> —— 这会导致插入/删除消息后整个列表重排，三角箭头方向、左右对齐全部错乱。
正确做法：
- 后端返回每条消息带唯一
id字段，直接用:key="item.id" - 若无服务端
id，可用:key="item.timestamp + '-' + i"（注意加连字符防拼接冲突） - 避免用
Date.now()或Math.random()生成 key，会导致每次渲染都新建节点，动画卡顿
左右区分气泡要用 class 而非 style 动态绑定
用 :style="{ textAlign: item.from === 'me' ? 'right' : 'left' }" 控制文本对齐，看起来能用，但会覆盖掉气泡三角定位所需的 position: relative 和 left/right 偏移逻辑，导致小三角始终贴左或消失。
推荐结构是：外层容器固定宽度 + margin-left 或 margin-right 控制左右，再用子元素 text-align 对齐内容。例如：
<view :class="['bubble', item.from === 'me' ? 'bubble-me' : 'bubble-other']"><text class="bubble-text">{{ item.content }}</text></view>
对应 CSS：
.bubble { padding: 20rpx 32rpx; border-radius: 48rpx; max-width: 70%; }
.bubble-me { margin-right: 24rpx; background: #007AFF; color: #fff; border-bottom-right-radius: 12rpx; }
.bubble-other { margin-left: 24rpx; background: #f2f2f2; color: #333; border-bottom-left-radius: 12rpx; }
这样三角形可用伪元素 ::after 安全添加，不会被内联样式干扰。
微信小程序真机上气泡三角不显示？检查 transform 和 z-index
在 H5 或 App 端正常，但微信小程序真机看不到三角，大概率是伪元素 ::after 被父容器裁剪或层级压住。微信小程序的 overflow: hidden 行为比其他平台更激进。
解决办法：
- 给气泡容器加
overflow: visible !important（微信小程序中!important有效） - 三角伪元素不要用
transform: translate(-50%, 0)定位，改用left: 12rpx或right: 12rpx配合top: -16rpx - 确保伪元素有明确
width/height和background（哪怕透明），否则某些安卓机型会忽略渲染 - 避免在气泡组件上设
z-index，改为用父级聊天区域统一控制层级
滚动到底部不能只靠 scrollToBottom，要等 DOM 更新完成
uni.pageScrollTo 在 v-for 新增消息后立刻调用，经常滚不到最新一条——因为 DOM 还没渲染完。uni-app 的 $nextTick 在某些平台（尤其是微信小程序）也不完全可靠。
稳妥做法是组合使用：
- 先用
this.$nextTick确保 Vue 层更新 - 再用
setTimeout延迟 30–50ms，留给小程序框架做真实 DOM 插入 - 最后用
createSelectorQuery获取最新消息元素的top值计算滚动位置
示例关键代码：
this.list.push(newMsg)
this.$nextTick(() => {
setTimeout(() => {
uni.createSelectorQuery()
.select('#msg-list')
.boundingClientRect(rect => {
uni.createSelectorQuery()
.select('.bubble:last-child')
.boundingClientRect(dom => {
uni.pageScrollTo({
scrollTop: dom.top - rect.top + rect.height,
duration: 200
})
})
.exec()
})
.exec()
}, 40)
})
注意：#msg-list 是整个消息容器的 id，.bubble:last-child 才是最新气泡——别误用 :last-of-type，它可能选中其他同类型元素。
气泡组件看似简单，真正上线后最常出问题的是「三角偏移随字体大小变化」和「长按复制时气泡遮挡菜单」，这两个点在设计阶段就要预留 padding 和 z-index 余量。
