feat: 更新聊天历史组件,添加滚动到激活项功能,优化背景图预加载逻辑
This commit is contained in:
parent
fd51d05c85
commit
a4a9a6c566
|
@ -12,7 +12,13 @@
|
||||||
新建对话
|
新建对话
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</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
|
<view
|
||||||
v-for="(group, groupIndex) in chatHistoryList3"
|
v-for="(group, groupIndex) in chatHistoryList3"
|
||||||
|
@ -28,6 +34,7 @@
|
||||||
class="chat-item"
|
class="chat-item"
|
||||||
v-for="(item, index) in group.conversation"
|
v-for="(item, index) in group.conversation"
|
||||||
:key="'conv-' + groupIndex + '-' + index"
|
:key="'conv-' + groupIndex + '-' + index"
|
||||||
|
:id="'chat-item-' + item.id"
|
||||||
:class="{
|
:class="{
|
||||||
'chat-item-active': item.isActiveChat,
|
'chat-item-active': item.isActiveChat,
|
||||||
}"
|
}"
|
||||||
|
@ -38,7 +45,7 @@
|
||||||
<text class="chat-text">{{ item.title }}</text>
|
<text class="chat-text">{{ item.title }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 添加底部空白区域 -->
|
<!-- 添加底部空白区域 -->
|
||||||
<view class="bottom-space"></view>
|
<view class="bottom-space"></view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
@ -85,6 +92,8 @@ export default {
|
||||||
showPopup: false,
|
showPopup: false,
|
||||||
currentActiveGroup: -1,
|
currentActiveGroup: -1,
|
||||||
currentActiveIndex: -1,
|
currentActiveIndex: -1,
|
||||||
|
activeItemId: "", // 存储当前激活项的ID
|
||||||
|
scrollToView: "", // 用于scroll-into-view属性
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -99,8 +108,43 @@ export default {
|
||||||
this.$emit("update:show", val);
|
this.$emit("update:show", val);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 监听聊天历史数据变化,找到激活项并滚动
|
||||||
|
chatHistoryList3: {
|
||||||
|
handler() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.scrollToActiveItem();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
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) {
|
selectChatItem(groupIndex, index, conversationId) {
|
||||||
// this.currentActiveGroup = groupIndex;
|
// this.currentActiveGroup = groupIndex;
|
||||||
// this.currentActiveIndex = index;
|
// this.currentActiveIndex = index;
|
||||||
|
@ -183,7 +227,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-space {
|
.bottom-space {
|
||||||
height: 30rpx;
|
height: 30rpx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -204,7 +248,7 @@ export default {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.user-avatar {
|
.user-avatar {
|
||||||
width: 56rpx;
|
width: 56rpx;
|
||||||
height: 56rpx;
|
height: 56rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 30rpx;
|
margin-right: 30rpx;
|
||||||
|
|
|
@ -376,7 +376,18 @@ export default {
|
||||||
deep: true,
|
deep: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
onLoad() {},
|
onLoad() {
|
||||||
|
// 预加载背景图
|
||||||
|
// uni.getImageInfo({
|
||||||
|
// src: '/static/common/images/images_bg.png',
|
||||||
|
// success: () => {
|
||||||
|
// console.log('背景图预加载成功');
|
||||||
|
// },
|
||||||
|
// fail: (err) => {
|
||||||
|
// console.error('背景图预加载失败', err);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleLeftClick() {
|
handleLeftClick() {
|
||||||
this.$u.api.GetConversationPage().then((res) => {
|
this.$u.api.GetConversationPage().then((res) => {
|
||||||
|
@ -573,16 +584,6 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<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 {
|
.home-container {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
// background-color: #f5f7fc;
|
// background-color: #f5f7fc;
|
||||||
|
@ -590,6 +591,12 @@ page {
|
||||||
112rpx + env(safe-area-inset-bottom)
|
112rpx + env(safe-area-inset-bottom)
|
||||||
); /* 为自定义tabBar预留空间 */
|
); /* 为自定义tabBar预留空间 */
|
||||||
padding-top: 88rpx;
|
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 {
|
.header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
@ -236,6 +236,7 @@ export default {
|
||||||
title: res.error || "发送失败",
|
title: res.error || "发送失败",
|
||||||
type: "error",
|
type: "error",
|
||||||
});
|
});
|
||||||
|
this.refreshCaptcha();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue