feat: 消息列表的调整
This commit is contained in:
@@ -13,8 +13,8 @@
|
|||||||
|
|
||||||
<!-- 消息列表(可滚动区域) -->
|
<!-- 消息列表(可滚动区域) -->
|
||||||
<scroll-view
|
<scroll-view
|
||||||
|
:scroll-top="scrollTop"
|
||||||
scroll-y
|
scroll-y
|
||||||
:scroll-into-view="lastMsgId"
|
|
||||||
:scroll-with-animation="true"
|
:scroll-with-animation="true"
|
||||||
class="area-msg-list"
|
class="area-msg-list"
|
||||||
>
|
>
|
||||||
@@ -46,8 +46,6 @@
|
|||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 底部锚点(用于滚动到底部) -->
|
|
||||||
<view :id="lastMsgId" class="lastMsgId"></view>
|
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|
||||||
<!-- 输入框区域 -->
|
<!-- 输入框区域 -->
|
||||||
@@ -106,8 +104,8 @@
|
|||||||
const conversationId = ref('1931957498711957505')
|
const conversationId = ref('1931957498711957505')
|
||||||
const mainPageDataModel = ref({})
|
const mainPageDataModel = ref({})
|
||||||
|
|
||||||
// 锚点ID(控制滚动位置)
|
//(控制滚动位置)
|
||||||
const lastMsgId = ref('anchor-bottom');
|
const scrollTop = ref(99999);
|
||||||
|
|
||||||
|
|
||||||
// 打开抽屉
|
// 打开抽屉
|
||||||
@@ -138,12 +136,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
const scrollToBottom = () => {
|
const scrollToBottom = () => {
|
||||||
// 短暂指向最新消息的ID(触发滚动)
|
|
||||||
lastMsgId.value = `${chatMsgList.value[chatMsgList.value.length - 1].msgId}`;
|
|
||||||
// 等待DOM更新后,切回底部锚点(确保下次能继续滚动到底)
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
lastMsgId.value = 'anchor-bottom';
|
scrollTop.value += 9999;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -151,7 +146,9 @@
|
|||||||
/// 发送普通消息
|
/// 发送普通消息
|
||||||
const handleReply = (text) => {
|
const handleReply = (text) => {
|
||||||
sendMessage(text)
|
sendMessage(text)
|
||||||
scrollToBottom()
|
setTimeout(() => {
|
||||||
|
scrollToBottom()
|
||||||
|
}, 100)
|
||||||
};
|
};
|
||||||
|
|
||||||
/// 是发送指令
|
/// 是发送指令
|
||||||
@@ -180,6 +177,7 @@
|
|||||||
mainPageDataModel.value = res.data
|
mainPageDataModel.value = res.data
|
||||||
agentId.value = res.data.agentId
|
agentId.value = res.data.agentId
|
||||||
initData()
|
initData()
|
||||||
|
scrollToBottom()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -23,6 +23,8 @@
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -39,6 +41,7 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
height: 0;
|
||||||
padding: 4px 0 0;
|
padding: 4px 0 0;
|
||||||
overscroll-behavior: contain; /* 阻止滚动穿透 */
|
overscroll-behavior: contain; /* 阻止滚动穿透 */
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
@@ -71,11 +74,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.lastMsgId {
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-area {
|
.footer-area {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -84,6 +82,8 @@
|
|||||||
touch-action: pan-x; /* 仅允许横向触摸滚动 */
|
touch-action: pan-x; /* 仅允许横向触摸滚动 */
|
||||||
overflow-x: auto; /* 允许横向滚动 */
|
overflow-x: auto; /* 允许横向滚动 */
|
||||||
overflow-y: hidden; /* 禁止垂直滚动 */
|
overflow-y: hidden; /* 禁止垂直滚动 */
|
||||||
|
/* 确保高度能够正确计算 */
|
||||||
|
min-height: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.area-input {
|
.area-input {
|
||||||
|
|||||||
Reference in New Issue
Block a user