xsl/meida_applet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【功能完善】客服聊天历史数据加载和回到顶部

Browse Source
This commit is contained in:
puhui999
2025-05-08 16:35:01 +08:00
parent c149a54e83
commit 13f674ab4b
1 changed files with 101 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/chat/components/messageList.vue
+101 -42
View File
@@ -1,9 +1,13 @@
<template>
<!-- 聊天列表使用scroll-view原生组件，整体倒置 -->
<scroll-view ref="scrollRef" class="chat-scroll-view" scroll-y :refresher-enabled="false"
@scroll="onScroll" style="transform: scaleY(-1);">
<scroll-view ref="scrollRef" :scroll-top="scroll.top" class="chat-scroll-view" scroll-y :refresher-enabled="false"
@scroll="onScroll" @scrolltolower="loadMoreHistory" style="transform: scaleY(-1);">
<!-- 消息列表容器 -->
<view class="message-container">
<!-- 加载更多提示 -->
<view v-if="isLoading" class="loading-more" style="transform: scaleY(-1);">
<text>加载中...</text>
</view>
<!-- 消息列表 -->
<view class="message-list">
<view v-for="(item, index) in messageList" :key="item.id" class="message-item"
@@ -18,7 +22,7 @@
<!-- 底部聊天输入框 -->
<su-fixed bottom>
<view v-if="showNewMessageTip" :style="backToTopStyle">
<view v-if="showNewMessageTip" :style="backToTopStyle" @click="scrollToTop">
<text>有新消息</text>
</view>
<slot name="bottom"></slot>
@@ -35,6 +39,13 @@
const messageList = ref([]); // 消息列表
const showNewMessageTip = ref(false); // 显示有新消息提示
const refreshMessage = ref(false); // 更新消息列表
const isLoading = ref(false); // 是否正在加载更多
const hasMore = ref(true); // 是否还有更多数据
const scrollRef = ref(null); // 滚动视图引用
const scroll = ref({
top: 0,
oldTop: 0,
});
const queryParams = reactive({
no: 1, // 查询次数，只用于触底计算
limit: 20,
@@ -50,49 +61,76 @@
justifyContent: 'center',
alignItems: 'center',
}); // 返回顶部样式
// const pagingRef = ref(null); // 虚拟列表
const queryList = async (no, limit) => {
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
queryParams.no = no;
queryParams.limit = limit;
await getMessageList();
};
// 获得消息分页列表
const getMessageList = async () => {
const { data } = await KeFuApi.getKefuMessageList(queryParams);
if (isEmpty(data)) {
// pagingRef.value.completeByNoMore([], true);
return;
}
if (queryParams.no > 1 && refreshMessage.value) {
const newMessageList = [];
for (const message of data) {
if (messageList.value.some((val) => val.id === message.id)) {
continue;
}
newMessageList.push(message);
isLoading.value = true;
try {
const { data } = await KeFuApi.getKefuMessageList(queryParams);
if (isEmpty(data)) {
hasMore.value = false;
return;
}
// 新消息追加到开头
messageList.value = [...newMessageList, ...messageList.value];
// pagingRef.value.updateCache(); // 更新缓存
refreshMessage.value = false; // 更新好后重置状态
return;
if (queryParams.no > 1 && refreshMessage.value) {
const newMessageList = [];
for (const message of data) {
if (messageList.value.some((val) => val.id === message.id)) {
continue;
}
newMessageList.push(message);
}
// 新消息追加到开头
messageList.value = [...newMessageList, ...messageList.value];
refreshMessage.value = false; // 更新好后重置状态
return;
}
if (queryParams.no > 1) {
// 加载更多历史消息，追加到现有列表末尾（因为是倒置的，所以旧消息在底部/列表末尾）
if (data.length < queryParams.limit) {
hasMore.value = false; // 如果返回的数据少于请求的数量，说明没有更多数据了
}
// 过滤掉已存在的消息
const historyMessages = data.filter(msg =>
!messageList.value.some(existing => existing.id === msg.id),
);
if (historyMessages.length > 0) {
messageList.value = [...messageList.value, ...historyMessages];
}
} else {
// 首次加载
messageList.value = data;
if (data.length < queryParams.limit) {
hasMore.value = false;
}
}
if (data.slice(-1).length > 0) {
// 设置最后一次历史查询的最后一条消息的 createTime
queryParams.createTime = formatDate(data.slice(-1)[0].createTime);
}
} finally {
isLoading.value = false;
}
if (data.slice(-1).length > 0) {
// 设置最后一次历史查询的最后一条消息的 createTime
queryParams.createTime = formatDate(data.slice(-1)[0].createTime);
}
messageList.value = data;
// pagingRef.value.completeByNoMore(data, false);
};
/** 加载更多历史数据 */
const loadMoreHistory = async () => {
if (isLoading.value || !hasMore.value) return;
// 增加页码
queryParams.no += 1;
await getMessageList();
};
/** 刷新消息列表 */
const refreshMessageList = async (message = undefined) => {
if (typeof message !== 'undefined') {
// 追加数据
messageList.value.map(message);
// pagingRef.value.addChatRecordData([message], false);
// 追加数据到列表开头（因为是倒置的，所以新消息在顶部/列表开头）
messageList.value.unshift(message);
} else {
queryParams.createTime = undefined;
refreshMessage.value = true;
@@ -107,10 +145,13 @@
}
};
/** 滚动到最新消息 */
const onBackToTopClick = (event) => {
event(false); // 禁用默认操作
// pagingRef.value.scrollToBottom();
/** 滚动到顶部（倒置后相当于滚动到最新消息） */
const scrollToTop = () => {
scroll.value.top = scroll.value.oldTop;
setTimeout(() => {
scroll.value.top = 0;
}, 200) // 等待 view 层同步
showNewMessageTip.value = false;
};
/** 监听滚动到底部事件（因为 scroll 翻转了顶就是底） */
@@ -121,15 +162,23 @@
}
showNewMessageTip.value = false;
};
defineExpose({ getMessageList, refreshMessageList });
defineExpose({ getMessageList, refreshMessageList, scrollToTop });
/** 监听消息列表滚动 */
const onScroll = (e) => {
const { scrollTop } = e.detail;
console.log('scrollTop', scrollTop);
scroll.value.oldTop = scrollTop;
// 当滚动位置超过一定值时，显示"新消息"提示
if (scrollTop > 100) {
showNewMessageTip.value = true;
} else {
showNewMessageTip.value = false;
}
};
onMounted(() => {
queryParams.no = 1; // 确保首次加载是第一页
getMessageList();
});
</script>
@@ -166,4 +215,14 @@
.message-item {
margin-bottom: 10px;
}
.loading-more {
width: 100%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #999;
font-size: 14px;
}
</style>