feat: 更新聊天历史组件,添加滚动到激活项功能,优化背景图预加载逻辑

This commit is contained in:
yangzhe 2025-07-11 16:38:12 +08:00
parent fd51d05c85
commit a4a9a6c566
3 changed files with 67 additions and 15 deletions

View File

@ -12,7 +12,13 @@
新建对话
</text>
</view>
<scroll-view scroll-y class="chat-history-list" :show-scrollbar="false">
<scroll-view
scroll-y
class="chat-history-list"
:scroll-into-view="scrollToView"
:show-scrollbar="false"
scroll-with-animation="true"
>
<!-- 使用新的数据结构渲染聊天历史 -->
<view
v-for="(group, groupIndex) in chatHistoryList3"
@ -28,6 +34,7 @@
class="chat-item"
v-for="(item, index) in group.conversation"
:key="'conv-' + groupIndex + '-' + index"
:id="'chat-item-' + item.id"
:class="{
'chat-item-active': item.isActiveChat,
}"
@ -38,7 +45,7 @@
<text class="chat-text">{{ item.title }}</text>
</view>
</view>
<!-- 添加底部空白区域 -->
<view class="bottom-space"></view>
</scroll-view>
@ -85,6 +92,8 @@ export default {
showPopup: false,
currentActiveGroup: -1,
currentActiveIndex: -1,
activeItemId: "", // ID
scrollToView: "", // scroll-into-view
};
},
watch: {
@ -99,8 +108,43 @@ export default {
this.$emit("update:show", val);
}
},
//
chatHistoryList3: {
handler() {
this.$nextTick(() => {
this.scrollToActiveItem();
});
},
deep: true,
immediate: true,
},
},
methods: {
//
scrollToActiveItem() {
//
let activeItemFound = false;
for (
let groupIndex = 0;
groupIndex < this.chatHistoryList3.length;
groupIndex++
) {
const group = this.chatHistoryList3[groupIndex];
for (let index = 0; index < group.conversation.length; index++) {
const item = group.conversation[index];
if (item.isActiveChat) {
activeItemFound = true;
this.activeItemId = `chat-item-${item.id}`;
// scrollToView使scroll-view
this.scrollToView = this.activeItemId;
break;
}
}
if (activeItemFound) break;
}
},
selectChatItem(groupIndex, index, conversationId) {
// this.currentActiveGroup = groupIndex;
// this.currentActiveIndex = index;
@ -183,7 +227,7 @@ export default {
}
}
}
.bottom-space {
height: 30rpx;
width: 100%;
@ -204,7 +248,7 @@ export default {
align-items: center;
.user-avatar {
width: 56rpx;
width: 56rpx;
height: 56rpx;
border-radius: 50%;
margin-right: 30rpx;

View File

@ -376,7 +376,18 @@ export default {
deep: true,
},
},
onLoad() {},
onLoad() {
//
// uni.getImageInfo({
// src: '/static/common/images/images_bg.png',
// success: () => {
// console.log('');
// },
// fail: (err) => {
// console.error('', err);
// }
// });
},
methods: {
handleLeftClick() {
this.$u.api.GetConversationPage().then((res) => {
@ -573,16 +584,6 @@ export default {
</script>
<style lang="scss" scoped>
page {
height: 100vh;
background-image: url("@/static/common/images/images_bg.png");
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: 0 88rpx;
background-attachment: fixed;
}
.home-container {
height: 100vh;
// background-color: #f5f7fc;
@ -590,6 +591,12 @@ page {
112rpx + env(safe-area-inset-bottom)
); /* 为自定义tabBar预留空间 */
padding-top: 88rpx;
background-image: url("@/static/common/images/images_bg.png");
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: 0 88rpx;
background-attachment: fixed;
.header {
position: fixed;

View File

@ -236,6 +236,7 @@ export default {
title: res.error || "发送失败",
type: "error",
});
this.refreshCaptcha();
}
});
},