瀏覽代碼

fix: 解决消息滚动加载后切换tab时会多次请求bug

jack 5 月之前
父節點
當前提交
905b88af63

+ 2 - 4
src/components/NotificationMessageCard/src/NotificationMessageCard.vue

@@ -223,13 +223,11 @@ const onScroll = () => {
   }
 }
 
-const sentinel = ref<HTMLElement | null>(null)
-
-const adjustScrollTop = () => {
+const adjustScrollTop = (scrollTopValue?: number) => {
   const el = scrollContainerRef.value
   if (el) {
     // 如果滚动容器存在,调整其 scrollTop
-    el.scrollTop = prevScrollTop.value
+    el.scrollTop = scrollTopValue !== undefined ? scrollTopValue : prevScrollTop.value
   }
 }
 

+ 17 - 16
src/views/SystemMessage/src/SystemMessage.vue

@@ -76,7 +76,7 @@ const unreadNotificationList = ref<any[]>([])
 const readNotificationList = ref<any[]>([])
 const pageInfo = ref({
   cp: 0,
-  ps: 30
+  ps: 4
 })
 const getNotificationList = async (
   tabType: string = 'All Notifications',
@@ -85,14 +85,14 @@ const getNotificationList = async (
   loading.value = true
   if (isChangeNav) {
     pageInfo.value.cp = 1
-    notificationMessageCardRef.value.finished = false
     unreadNotificationList.value = []
     readNotificationList.value = []
     notificationList.value = []
+    notificationMessageCardRef.value.adjustScrollTop(0)
     if (activeCardTypeName.value === 'Feature Update') {
       pageInfo.value.ps = 100
     } else {
-      pageInfo.value.ps = 30
+      pageInfo.value.ps = 4
     }
   } else {
     pageInfo.value.cp += 1
@@ -121,27 +121,29 @@ const getNotificationList = async (
       .then((res) => {
         if (res.code === 200) {
           const data = res.data
+          const cardList = data?.cardList || []
 
           // 判断是否结束加载
-          if (!data?.cardList?.length || data.cardList.length < pageInfo.value.ps) {
-            notificationMessageCardRef.value.finished = true
-          }
+          notificationMessageCardRef.value.finished =
+            !cardList.length || cardList.length < pageInfo.value.ps
 
-          const lists = {
+          const listConfig = {
             'All Notifications': { list: notificationList, count: tabCountList },
             Unread: { list: unreadNotificationList },
             Read: { list: readNotificationList }
           }
 
-          const config = lists[tabType]
-          if (config) {
-            config.list.value = isChangeNav
-              ? [...data.cardList]
-              : [...config.list.value, ...data.cardList]
+          const currentConfig = listConfig[tabType]
+          if (!currentConfig) return
+
+          if (isChangeNav) {
+            currentConfig.list.value = [...cardList]
+          } else {
+            currentConfig.list.value = [...currentConfig.list.value, ...cardList]
           }
 
-          if (config?.count) {
-            config.count.value = data.countList
+          if (currentConfig.count) {
+            currentConfig.count.value = data.countList || []
           }
         }
       })
@@ -149,8 +151,7 @@ const getNotificationList = async (
         loading.value = false
         curTabCount.value = []
         notificationMessageCardRef.value.loading = false
-
-        notificationMessageCardRef.value.adjustScrollTop()
+        notificationMessageCardRef.value.adjustScrollTop(isChangeNav ? 0 : undefined)
       })
   } catch (error) {
     loading.value = false