fix: 触底刷新请求问题

IdeaLeap · Feb 4, 2023 · 0d95c58 · 0d95c58
1 parent e0d95a0
commit 0d95c58
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 12 deletions.
diff --git a/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json b/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json
@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "2023-02-03T11:55:26.798Z"
+    "x-generation-date": "2023-02-04T03:55:33.793Z"
   },
   "x-strapi-config": {
     "path": "/documentation",

diff --git a/frontend/components/ArticlesList/Item/AuthorInfo.vue b/frontend/components/ArticlesList/Item/AuthorInfo.vue
@@ -45,7 +45,7 @@ defineProps({
 }
 .author_panel::after {
   border: 10px solid transparent;
-  @apply w-0 h-0 border-[10px]
+  @apply w-0 h-0 border-[10px] border-t-white
   @apply absolute bottom-0 left-1/2 content-none -translate-x-1/2 translate-y-full
   @apply dark:border-t-jj_bg_gray
 }

diff --git a/frontend/components/ArticlesList/Item/Topbar.vue b/frontend/components/ArticlesList/Item/Topbar.vue
@@ -38,7 +38,7 @@ defineProps({
   @apply transition text-jj-font px-3 border-r-1 pl-0 hover:text-[#1E80FF]
 }
 .author_info {
-  @apply scale-0 delay-150 transition-all
+  @apply scale-0 delay-150 transition-all text-black
 }
 .author_info:hover {
   @apply scale-100;

diff --git a/frontend/components/ArticlesList/index.vue b/frontend/components/ArticlesList/index.vue
@@ -1,9 +1,10 @@
+<!-- eslint-disable no-console -->
 <script setup lang="ts">
 const route = useRoute()
 let pagenum = 1
 const isLoading = useState('isLoading', () => false)
 const isEmpty = useState('isEmpty', () => false)
-const artlistData = useArtlist([])
+const artlistData = useArtlist(await useFetchPostData())
 const addArtListItem = () => {
   if (useScrollBottom()) {
     pagenum++
@@ -14,7 +15,6 @@ const addArtListItem = () => {
 }
 watch(route, () => {
   pagenum = 1
-  artlistData.value = []
   isLoading.value = true
   useFetchPostData(route.path, route.query?.sort).then((data) => {
     if (!data.length) {
@@ -25,21 +25,24 @@ watch(route, () => {
     isEmpty.value = false
     isLoading.value = false
   })
-}, { deep: true, immediate: true })
-onMounted(() => {
+}, { deep: true })
+const bottomHandler = useThrottle(addArtListItem)
+onBeforeMount(() => {
+  console.log('onMounted')
   const EmployeeWindow = window as any
-  EmployeeWindow.addEventListener('scroll', useThrottle(addArtListItem))
+  EmployeeWindow.addEventListener('scroll', bottomHandler)
 })
 onUnmounted(() => {
+  console.log('onUnmounted')
   const EmployeeWindow = window as any
-  EmployeeWindow.removeEventListener('scroll', useThrottle(addArtListItem)) // 页面离开后销毁监听事件
+  EmployeeWindow.removeEventListener('scroll', bottomHandler)
 })
 </script>
 
 <template>
   <div class="articlelist">
     <ArticlesListNavigation />
-    <ArticlesListSkeleton v-if="isLoading && isEmpty" />
+    <ArticlesListSkeleton v-if="isLoading || isEmpty" />
     <ul v-else>
       <ArticlesListItem
         v-for="item in artlistData"

diff --git a/frontend/composables/useThrottle.ts b/frontend/composables/useThrottle.ts
@@ -1,10 +1,10 @@
-export default (fn: () => any, wait = 1000) => {
+export default (fn?: () => any, wait = 1000) => {
   let timer: NodeJS.Timeout | null = null
   return () => {
     if (!timer) {
       timer = setTimeout(() => {
         timer = null
-        fn()
+        fn && fn()
       }, wait)
     }
   }