feat: 消息列表的调整
This commit is contained in:
@@ -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)
|
||||
setTimeout(() => {
|
||||
scrollToBottom()
|
||||
}, 100)
|
||||
};
|
||||
|
||||
/// 是发送指令
|
||||
@@ -180,6 +177,7 @@
|
||||
mainPageDataModel.value = res.data
|
||||
agentId.value = res.data.agentId
|
||||
initData()
|
||||
scrollToBottom()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user