app动态追加分页

LiangZhiYUMao/pages/mine/my-dynamics.vue

@@ -216,14 +216,30 @@ export default {
             // 浏览记录列表数据
             browseList: [],
             // 默认头像
-            defaultAvatar: 'https://via.placeholder.com/100x100.png?text=头像'
+            defaultAvatar: 'https://via.placeholder.com/100x100.png?text=头像',
+            // 我的动态分页相关
+            dynamicPageNum: 1,
+            dynamicPageSize: 10,
+            dynamicLoading: false,
+            dynamicNoMore: false
         }
     },
   onLoad() {
     // 页面加载时获取用户信息和动态数据
     this.loadUserInfo();
+    // 初始化分页状态并加载第一页数据
+    this.dynamicPageNum = 1;
+    this.dynamicNoMore = false;
+    this.dynamicList = [];
     this.loadDynamicData();
   },
+  // 页面触底加载更多
+  onReachBottom() {
+    // 仅在“动态”标签下并且还有更多数据时加载
+    if (this.activeTab === 'dynamic' && !this.dynamicNoMore && !this.dynamicLoading) {
+      this.loadDynamicData();
+    }
+  },
   methods: {
         // 返回上一页
         goBack() {
@@ -248,6 +264,11 @@ export default {
       this.activeTab = tab;
       // 根据标签页加载对应数据
       if (tab === 'dynamic') {
+        // 切换回“动态”时，如果还没有数据或之前已经加载完一部分，继续使用当前分页状态
+        if (this.dynamicList.length === 0) {
+          this.dynamicPageNum = 1;
+          this.dynamicNoMore = false;
+        }
         this.loadDynamicData();
       } else if (tab === 'interaction') {
         this.loadInteractionData();
@@ -295,20 +316,42 @@ export default {
       }
     },
     // 加载动态数据
-    loadDynamicData() {
+    async loadDynamicData() {
       const userInfo = uni.getStorageSync('userInfo');
-      if (userInfo && userInfo.userId) {
-        // 获取用户发布的动态列表
-        api.dynamic.getUserDynamics(userInfo.userId, {
-          pageNum: 1,
-          pageSize: 10
-        }).then(res => {
-          if (res && res.records) {
-            this.dynamicList = res.records;
-          }
-        }).catch(err => {
-          console.error('获取用户动态列表失败:', err);
+      if (!userInfo || !userInfo.userId) {
+        return;
+      }
+      if (this.dynamicLoading || this.dynamicNoMore) {
+        return;
+      }
+
+      this.dynamicLoading = true;
+      try {
+        // 获取用户发布的动态列表（分页）
+        const res = await api.dynamic.getUserDynamics(userInfo.userId, {
+          pageNum: this.dynamicPageNum,
+          pageSize: this.dynamicPageSize
         });
+
+        if (res && res.records) {
+          const records = res.records || [];
+          if (this.dynamicPageNum === 1) {
+            this.dynamicList = records;
+          } else {
+            this.dynamicList = [...this.dynamicList, ...records];
+          }
+
+          // 根据返回数量判断是否还有更多
+          if (!records || records.length < this.dynamicPageSize) {
+            this.dynamicNoMore = true;
+          } else {
+            this.dynamicPageNum += 1;
+          }
+        }
+      } catch (err) {
+        console.error('获取用户动态列表失败:', err);
+      } finally {
+        this.dynamicLoading = false;
       }
     },
     // 加载互动数据