feat: 消息列表的调整

This commit is contained in:
zoujing 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 {