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 | 101 +++++++++++++++++++++++++++++++++-----------------
1 files changed, 66 insertions(+), 35 deletions(-)
diff --git a/src/views/sessionManager/components/historySession.vue b/src/views/sessionManager/components/historySession.vue
index 24ef4e3..84519c6 100644
--- a/src/views/sessionManager/components/historySession.vue
+++ b/src/views/sessionManager/components/historySession.vue
@@ -22,9 +22,11 @@
class="left-list"
style="
height: calc(100vh - 160px);
- overflow-y: auto;
+ overflow-y: scroll;
overflow-x: hidden;
"
+ v-if="isReached"
+ @scroll="handleScroll"
>
<div class="historyTitle___F_iam">鍘嗗彶浼氳瘽</div>
@@ -116,6 +118,15 @@
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) {
@@ -167,8 +178,7 @@
const querySessionList = async (id) => {
const { code, data } = await sessionListApiPage({
dialog_id: id,
- page: 1,
- page_size: 100
+ ...queryPage
});
if (code === 200) {
sessionList.value = data.map((item) => {
@@ -177,7 +187,7 @@
showtype: 1
}
});
-
+ // total.value = sessionList.value.length;
} else {
@@ -247,25 +257,53 @@
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) {
- // //婊氬姩鏉″埌杈惧簳閮�
- // if (cardData.value.length < total.value) {
- // //鏁版嵁涓哄姞杞藉畬锛岀户缁祴鍊�
- // serarchData.pageNum++
- //
- //
- //
- // }
- // }
-}
+ scrollTopVal.value = e.target.scrollTop;
+ let offsetHeight = e.target.offsetHeight;
+ let scrollHeight = e.target.scrollHeight;
-const loading: any = computed(() => {
- // cardData.value.length >= total.value
-})
+ 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("鏌ヨ澶辫触");
+ }
+
+ }
+}
@@ -281,20 +319,13 @@
querySessionList('');
});
+ // 娣诲姞婊氬姩浜嬩欢鐩戝惉鍣�
+ scrollRef.value.$el.addEventListener('scroll', handleScroll);
-// 缁欏厓绱犳坊鍔犳粴鍔ㄤ簨浠剁洃鍚�
-// if (scrollRef.value) {
-// // 缁欏厓绱犳坊鍔犳粴鍔ㄧ洃鍚櫒
-//
-// scrollRef.value.addEventListener('scroll', handleScroll, true)
-//
-// // 濡傛灉浣犻渶瑕佸湪缁勪欢鍗歌浇鏃剁Щ闄ょ洃鍚櫒锛屽彲浠ヨ繑鍥炰竴涓竻鐞嗗嚱鏁�
-// return () => {
-// scrollRef.value.removeEventListener('scroll', handleScroll, true)
-// }
-// }
-
-
+ // 娓呯悊鍑芥暟
+ return () => {
+ scrollRef.value.$el.removeEventListener('scroll', handleScroll);
+ };
--
Gitblit v1.8.0