优化用户主页的分页

src/views/user/home.vue

@@ -50,9 +50,9 @@
         </v-col>
       </v-row>
       <v-tabs>
-        <v-tab @click="setType(0)">状态</v-tab>
-        <v-tab @click="setType(1)">视频</v-tab>
-        <v-tab @click="setType(2)">回答</v-tab>
+        <v-tab @click="selectTab(0)">视频</v-tab>
+        <v-tab @click="selectTab(1)">状态</v-tab>
+        <v-tab @click="selectTab(2)">回答</v-tab>
       </v-tabs>
     </v-container>
     <v-divider />
@@ -93,10 +93,10 @@
       <v-row>
         <v-col
           v-for="item in cardList"
-          :key="item.id"
+          :key="item"
         >
-          <status-card v-if="cardType === 'status'" :item="item" />
           <video-card v-if="cardType === 'video'" :video="item" />
+          <status-card v-if="cardType === 'status'" :item="item" />
         </v-col>
       </v-row>
       <v-row justify="center">
@@ -134,11 +134,9 @@ export default {
       userInfo: {},
       cardType: null,
       cardList: [],
-      page: 1,
       currentPage: 1,
-      size: 20,
-      length: 1,
-      totalCount: 0,
+      page: 1,
+      length: 0,
       type: 0
     }
   },
@@ -159,9 +157,35 @@ export default {
     if (jumpPage !== undefined) {
       this.page = parseInt(jumpPage)
     }
-    this.getStatusList(this.page)
+    this.getVideoList(this.page)
   },
   methods: {
+    selectTab(type) {
+      if (type === this.type) {
+        return
+      }
+
+      this.type = type
+      this.page = 1
+      if (type === 0) {
+        this.initPagerParam()
+        this.getVideoList(1)
+        this.$vuetify.goTo(type)
+      } else if (type === 1) {
+        this.initPagerParam()
+        this.getStatusList(1)
+        this.$vuetify.goTo(type)
+      } else if (type === 2) {
+        this.initPagerParam()
+        this.getAnswerList(1)
+        this.$vuetify.goTo(type)
+      }
+    },
+    initPagerParam() {
+      this.currentPage = 1
+      this.page = 1
+      this.length = 0
+    },
     getUserInfo(userId) {
       getUserInfo(userId).then(res => {
         if (res.code === 0) {
@@ -174,24 +198,14 @@ export default {
         console.error(error.message)
       })
     },
-    getStatusList(page) {
-      if (this.page === 1) {
-        this.cardList = []
-      }
-
-      this.cardType = 'status'
-      console.log('获取状态列表')
-    },
     getVideoList(page) {
       userVideoList(page, this.userId).then(res => {
         if (res.code === 0) {
           this.cardType = 'video'
-
-          if (this.page === 1) {
-            this.cardList = []
-          }
+          this.$vuetify.goTo(0)
 
           const pageList = res.data
+          this.cardList.splice(0, this.cardList.length)
           for (const item of pageList.list) {
             this.cardList.push(item)
           }
@@ -204,6 +218,14 @@ export default {
         console.error(error.message)
       })
     },
+    getStatusList(page) {
+      if (this.page === 1) {
+        this.cardList = []
+      }
+
+      this.cardType = 'status'
+      console.log('获取状态列表')
+    },
     getAnswerList(page) {
       if (this.page === 1) {
         this.cardList = []
@@ -214,31 +236,7 @@ export default {
     pageChange(page) {
       this.page = page
       if (page !== this.currentPage) {
-        this.currentPage = page
-        this.$router.push({
-          path: this.$route.path,
-          query: {
-            page: page
-          }
-        })
-      }
-    },
-    setType(type) {
-      if (type === this.type) {
-        return
-      }
-
-      this.type = type
-      this.page = 1
-      if (type === 0) {
-        this.getStatusList(1)
-        this.$vuetify.goTo(type)
-      } else if (type === 1) {
-        this.getVideoList(1)
-        this.$vuetify.goTo(type)
-      } else if (type === 2) {
-        this.getAnswerList(1)
-        this.$vuetify.goTo(type)
+        this.getVideoList(page)
       }
     },
     goToVip() {

src/views/video/data.js

@@ -1,58 +0,0 @@
-export const EXAMPLE_DATA = [
-  {
-    _id: 1,
-    content: '梦芸\n近况如何\n算来已有十月未见你\n甚是思念',
-    visitor: {
-      name: '我叫白云',
-      avatar: require('./assets/image/comment.png')
-    },
-    createAt: '2022-06-15 19:55:37',
-    likes: 1,
-    liked: true,
-    childrenComments: [
-      {
-        _id: 2,
-        content:
-          '此刻我能闻见漫天火药味道\n我随军藏身长江边一暗无天日的地窖底\n埋首台灯下写这些字却不知把心绪给寄向何地',
-        visitor: {
-          name: 'NARUTO',
-          avatar: require('./assets/image/avatar2.jpg')
-        },
-        createAt: '2020.11.25'
-      },
-      {
-        _id: 3,
-        content: '\n如磐石般坚毅',
-        visitor: {
-          name: '我叫黑土',
-          avatar: require('./assets/image/avatar3.jpg')
-        },
-        createAt: '2020.11.25',
-        reply: {
-          name: 'NARUTO',
-          avatar: require('./assets/image/avatar2.jpg')
-        }
-      }
-    ]
-  },
-  {
-    _id: 4,
-    content: '我想时光亦是用来磨的\n细细地磨慢慢地磨\n总能磨出些许墨香来',
-    visitor: {
-      name: '我叫黑土',
-      avatar: require('./assets/image/avatar3.jpg')
-    },
-    createAt: '2020.12.5',
-    childrenComments: [
-      {
-        _id: 5,
-        content: '即使我鼻子已不灵\n眼睛生出疾\n侥幸你的照片还能辨出依稀',
-        visitor: {
-          name: 'NARUTO',
-          avatar: require('./assets/image/avatar2.jpg')
-        },
-        createAt: '2020.12.6'
-      }
-    ]
-  }
-]