翻页等优化

src/student/music/personal/album.tsx

@@ -27,7 +27,7 @@ export default defineComponent({
       isError.value = false
       try {
         const res = await request('/api-student/music/album/favorite', {
-          data: params
+          params
         })
         data.value = res.data
         params.page = res.data.pageNo + 1

src/student/music/personal/collection.tsx

@@ -30,7 +30,7 @@ export default defineComponent({
       isError.value = false
       try {
         const res = await request('/api-student/music/sheet/favorite', {
-          data: params
+          params
         })
         rows.value = [...res.data.rows]
         data.value = res.data

src/student/music/personal/personal.tsx

@@ -30,7 +30,7 @@ export default defineComponent({
       isError.value = false
       try {
         const res = await request('/api-student/music/sheet/my', {
-          data: params
+          params
         })
         rows.value = [...res.data.rows]
         data.value = res.data

src/student/music/personal/practice.tsx

@@ -1,7 +1,7 @@
 import request from '@/helpers/request'
 import { useAsyncState } from '@vueuse/core'
-import { defineComponent } from 'vue'
-import { Cell } from 'vant'
+import { defineComponent, ref } from 'vue'
+import { Cell, Skeleton } from 'vant'
 import Item from '../list/item'
 import { musicBuy } from '../music'
 
@@ -9,6 +9,8 @@ export default defineComponent({
   name: 'Practice',
   emits: ['favorite'],
   setup(props, { expose, emit }) {
+    /** 这里条数不会变动，设置固定高度避免抖动 */
+    const prevNum = ref(0)
     const { isLoading, state, execute } = useAsyncState(
       (args): Promise<any> =>
         request.get('/api-student/music/sheet/practice', {
@@ -25,19 +27,29 @@ export default defineComponent({
 
     return () => {
       const list: any[] = state.value?.data.rows || []
+      if (prevNum.value === 0) {
+        prevNum.value = list.length
+      }
       return (
         <>
-          {list.length > 0 && <Cell title="最近练习" />}
-          {list.map(item => (
-            <Item
-              key={item.id}
-              data={item}
-              onClick={() => musicBuy(item)}
-              onFavorite={() => {
-                emit('favorite')
-              }}
-            />
-          ))}
+          {prevNum.value > 0 && <Cell title="最近练习" />}
+          {Array.from(Array(prevNum.value)).map((_, index) => {
+            const item = list[index]
+            console.log(list, item)
+            if (!item) {
+              return <Skeleton row={5} />
+            }
+            return (
+              <Item
+                key={item.id}
+                data={item}
+                onClick={() => musicBuy(item)}
+                onFavorite={() => {
+                  emit('favorite')
+                }}
+              />
+            )
+          })}
         </>
       )
     }