feat: 增加骨架屏效果

IdeaLeap · Jan 27, 2023 · 3903563 · 3903563
1 parent 494d396
commit 3903563
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git a/backend/.tmp/data.db b/backend/.tmp/data.db
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-01-27T04:58:57.064Z"
+    "x-generation-date": "2023-01-27T08:40:22.000Z"
   },
   "x-strapi-config": {
     "path": "/documentation",

diff --git a/frontend/components/Articles/index.vue b/frontend/components/Articles/index.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 const route = useRoute()
-let pagenum = 0
-const type = route.path.replace('/', '')
-const sort = route.query?.sort as string | undefined
+let pagenum = 1
 const isLoading = useState('isLoading', () => false)
 const artlistData = useArtlist(await useFetchPostData())
 const addArtListItem = () => {
   if (useScrollBottom()) {
     const timer = setTimeout(async () => {
       if (useScrollBottom()) {
         pagenum++
+        const type = route.path.replace('/', '')
+        const sort = route.query?.sort as (string | undefined)
         const newArtlistData = await useFetchPostData(type, sort, pagenum)
         artlistData.value.push(...newArtlistData)
       }
@@ -18,10 +18,12 @@ const addArtListItem = () => {
   }
 }
 watchEffect(() => {
-  // eslint-disable-next-line no-console
-  console.log(type, sort)
+  const type = route.path.replace('/', '')
+  const sort = route.query?.sort as (string | undefined)
+  isLoading.value = true
   useFetchPostData(type, sort).then((data) => {
     artlistData.value = data
+    isLoading.value = false
   })
 })
 onMounted(() => {

diff --git a/frontend/composables/useFetchPostData.ts b/frontend/composables/useFetchPostData.ts
@@ -18,9 +18,8 @@ export const useArtlistPath = (path?: string | undefined) => useState('artlistPa
 // TODO: 请求数据
 export default async (type?: string, sort = 'recommended', pagenum = 1): Promise<IPanel[]> => {
   // 接口
-  const { data: fetchData } = await useFetch(`/api/articles/list?sort=${sort}&type=${type}&pageNum=${pagenum}`)
-  const data = fetchData.value.articles.data
-  const value: IPanel[] = data.map((item: IArticleItem) => {
+  const { data } = await useFetch(`/api/articles/list?sort=${sort}&type=${type}&pageNum=${pagenum}`)
+  const value: IPanel[] = data.value.map((item: IArticleItem) => {
     const tagIds: string[] = []
     item.tagIds.data.forEach((sub) => {
       tagIds.push(sub.tag)