feat: 更新聊天历史组件,添加滚动到激活项功能,优化背景图预加载逻辑
This commit is contained in:
parent
fd51d05c85
commit
a4a9a6c566
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -236,6 +236,7 @@ export default {
|
|||
title: res.error || "发送失败",
|
||||
type: "error",
|
||||
});
|
||||
this.refreshCaptcha();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue