uniapp中scroll-view聊天界面滚动到底部展示最新消息
自我记录
方案一
<scroll-view
scroll-y
class="scroll-view-main"
@scroll="onScroll"
scroll-with-animation
:scroll-into-view="scrollId"
>
<!-- xxxxx 消息内容 -->
<!-- xxxxx 消息内容 -->
<!-- xxxxx 消息内容 -->
<!-- xxxxx 消息内容 -->
<!-- 显示最新消息 -->
<view id="msg-001"/>
</scroll-view>
// 滚动指定元素ID
const scrollId = ref<string>()
// 处理滚动位置事件
const handleScrollLocation = async (id: number | undefined) => {
scrollId.value = id ? `msg-${id}` : undefined
await nextTick()
scrollId.value = undefined
}
// 发送消息公共方法
const handleSendCommon = (val: string) => {
infoParams.value.question = val
// 创建临时数组
const TEMP_ITEM: ChatWriteMsgItem = {
messageId: 999,
role: 'user',
message: val,
createTime: moment().format('YYYY-MM-DD hh:mm:ss'),
}
handleScrollLocation(TEMP_ITEM.messageId)
handleChatWrite()
}
如有转载 请备注原文地址!