feat: 消息列表的调整

This commit is contained in:
2025-07-27 18:01:38 +08:00
parent a796d06631
commit 48bc37701c
2 changed files with 13 additions and 15 deletions

View File

@@ -13,8 +13,8 @@
<!-- 消息列表可滚动区域 -->
<scroll-view
:scroll-top="scrollTop"
scroll-y
:scroll-into-view="lastMsgId"
:scroll-with-animation="true"
class="area-msg-list"
>
@@ -46,8 +46,6 @@
</template>
</view>
<!-- 底部锚点用于滚动到底部 -->
<view :id="lastMsgId" class="lastMsgId"></view>
</scroll-view>
<!-- 输入框区域 -->
@@ -106,8 +104,8 @@
const conversationId = ref('1931957498711957505')
const mainPageDataModel = ref({})
// 锚点ID(控制滚动位置)
const lastMsgId = ref('anchor-bottom');
//(控制滚动位置)
const scrollTop = ref(99999);
// 打开抽屉
@@ -138,12 +136,9 @@
}
const scrollToBottom = () => {
// 短暂指向最新消息的ID触发滚动
lastMsgId.value = `${chatMsgList.value[chatMsgList.value.length - 1].msgId}`;
// 等待DOM更新后切回底部锚点确保下次能继续滚动到底
nextTick(() => {
nextTick(() => {
lastMsgId.value = 'anchor-bottom';
scrollTop.value += 9999;
});
});
}
@@ -151,7 +146,9 @@
/// 发送普通消息
const handleReply = (text) => {
sendMessage(text)
scrollToBottom()
setTimeout(() => {
scrollToBottom()
}, 100)
};
/// 是发送指令
@@ -180,6 +177,7 @@
mainPageDataModel.value = res.data
agentId.value = res.data.agentId
initData()
scrollToBottom()
}
}

View File

@@ -23,6 +23,8 @@
height: 100vh;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
z-index: 1;
overflow: hidden;
@@ -39,6 +41,7 @@
flex: 1;
overflow-y: auto;
min-height: 0;
height: 0;
padding: 4px 0 0;
overscroll-behavior: contain; /* 阻止滚动穿透 */
-webkit-overflow-scrolling: touch;
@@ -71,11 +74,6 @@
}
}
.lastMsgId {
}
.footer-area {
width: 100vw;
flex-shrink: 0;
@@ -84,6 +82,8 @@
touch-action: pan-x; /* 仅允许横向触摸滚动 */
overflow-x: auto; /* 允许横向滚动 */
overflow-y: hidden; /* 禁止垂直滚动 */
/* 确保高度能够正确计算 */
min-height: fit-content;
}
.area-input {