From fe2d4623b7ad5ce6e9706125e1f33581ea8b03f0 Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期二, 20 八月 2024 18:35:59 +0800
Subject: [PATCH] 历史记录添加滚动分页
---
src/views/sessionManager/components/historySession.vue | 91 ++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 85 insertions(+), 6 deletions(-)
diff --git a/src/views/sessionManager/components/historySession.vue b/src/views/sessionManager/components/historySession.vue
index f4d386e..84519c6 100644
--- a/src/views/sessionManager/components/historySession.vue
+++ b/src/views/sessionManager/components/historySession.vue
@@ -18,12 +18,15 @@
</a-button>
<a-scrollbar
+ ref="scrollRef"
class="left-list"
style="
- height: calc(100vh - 100px);
- overflow-y: auto;
+ height: calc(100vh - 160px);
+ overflow-y: scroll;
overflow-x: hidden;
"
+ v-if="isReached"
+ @scroll="handleScroll"
>
<div class="historyTitle___F_iam">鍘嗗彶浼氳瘽</div>
@@ -54,7 +57,7 @@
<img
:style="{ width: '16px' }"
alt="dessert"
- :src="session.avatar || imgSrc"
+ :src="session.icon ? httpUrl + session.icon : imgSrc"
/>
{{ session.name }}
</div>
@@ -94,7 +97,7 @@
getDialogListApi,
getSessionDetailsApi,
deleteSessionApi,
- sessionListApi
+ sessionListApiPage
} from "@/api/session";
import { queryCanvasList } from "@/api/Agent";
@@ -112,7 +115,18 @@
const searchValue = ref("");
const selectValue = ref("");
const sectionList = ref({});
+const scrollRef = ref(null);
+const httpUrl = localStorage.getItem('httpUrl');
const imgSrc = ref(logo);
+let scrollTopVal = ref(0);
+let queryPage = reactive({
+ page: 1,
+ page_size: 50
+})
+let total = ref(0);
+let sessionScrollList = ref([]);
+let isReached = ref(true);
+
const DialogList = async () => {
const { code, data } = await getDialogListApi();
if (code === 200) {
@@ -162,7 +176,10 @@
// 鏌ヨ浼氳瘽鍒楄〃
const querySessionList = async (id) => {
- const { code, data } = await sessionListApi(id);
+ const { code, data } = await sessionListApiPage({
+ dialog_id: id,
+ ...queryPage
+ });
if (code === 200) {
sessionList.value = data.map((item) => {
return {
@@ -170,7 +187,7 @@
showtype: 1
}
});
-
+ // total.value = sessionList.value.length;
} else {
@@ -238,6 +255,58 @@
session.showtype = 1;
};
+
+const handleScroll = async (e: any) => {
+ scrollTopVal.value = e.target.scrollTop;
+ let offsetHeight = e.target.offsetHeight;
+ let scrollHeight = e.target.scrollHeight;
+
+ if (scrollTopVal.value + offsetHeight >= scrollHeight-1) {
+ console.log(scrollTopVal.value);
+ // console.log(offsetHeight);
+ // console.log(scrollHeight);
+ //婊氬姩鏉″埌杈惧簳閮�
+ // if (sessionList.value.length < total.value) {
+ // //鏁版嵁涓哄姞杞藉畬锛岀户缁祴鍊�
+ // // queryPage.page++
+ //
+ //
+ //
+ // }
+ queryPage.page++
+ const { code, data } = await sessionListApiPage({
+ dialog_id: '',
+ ...queryPage
+ });
+ if (code === 200) {
+ sessionScrollList.value = data.map((item) => {
+ return {
+ ...item,
+ showtype: 1
+ }
+ });
+ // total.value = sessionList.value.length;
+ sessionList.value = [...sessionList.value,...sessionScrollList.value];
+ isReached.value = false;
+ setTimeout(()=>{
+ isReached.value = true;
+ nextTick(()=>{
+ scrollRef.value.scrollTop(scrollTopVal.value);
+ console.log(scrollRef.value.$el.scrollTop,'scrollTopVal');
+ console.log(scrollTopVal.value,'scrollTopVal');
+ })
+ },100)
+
+
+ } else {
+ Message.warning("鏌ヨ澶辫触");
+ }
+
+ }
+}
+
+
+
onBeforeMount(()=>{
// DialogList()
querySessionList('');
@@ -250,6 +319,16 @@
querySessionList('');
});
+ // 娣诲姞婊氬姩浜嬩欢鐩戝惉鍣�
+ scrollRef.value.$el.addEventListener('scroll', handleScroll);
+
+ // 娓呯悊鍑芥暟
+ return () => {
+ scrollRef.value.$el.removeEventListener('scroll', handleScroll);
+ };
+
+
+
})
onBeforeUnmount(() => {
EventBus.off("history");
--
Gitblit v1.8.0