在微信小程序中實現分頁加載數據列表，可通過以下步驟將后續請求的10條數據追加到首次加載的數據之后：

實現步驟及代碼示例

1. 定義頁面數據與參數
   在頁面的?data?中初始化存儲列表、頁碼、加載狀態及是否有更多數據的標識：

Page({data: {list: [],        // 存儲所有加載的數據pageNum: 1,      // 當前頁碼pageSize: 10,    // 每頁數據量hasMore: true,   // 是否還有更多數據isLoading: false // 防止重復請求}
});

2.?首次加載數據
在頁面加載時（如?onLoad）調用數據加載方法：

onLoad() {this.loadData();
}

3.實現數據加載方法
處理分頁請求，合并新舊數據并更新狀態：

loadData() {if (!this.data.hasMore || this.data.isLoading) return;this.setData({ isLoading: true });const { pageNum, pageSize } = this.data;wx.request({url: 'https://api.example.com/list',data: { page: pageNum, pageSize },success: (res) => {if (res.statusCode === 200) {const newList = res.data.list;const total = res.data.total; // 假設接口返回總條數const currentTotal = this.data.list.length + newList.length;this.setData({list: [...this.data.list, ...newList], // 追加新數據pageNum: pageNum + 1,hasMore: currentTotal < total, // 判斷是否還有更多isLoading: false});}},fail: (err) => {console.error('請求失敗:', err);this.setData({ isLoading: false });wx.showToast({ title: '加載失敗', icon: 'none' });}});
}

4.監聽滑動到底部事件
使用?onReachBottom?生命周期函數觸發加載：

onReachBottom() {this.loadData();
}

5.頁面渲染與狀態提示
在 WXML 中渲染列表及加載狀態：

<!-- 列表渲染 -->
<view wx:for="{{list}}" wx:key="id">{{item.content}}
</view><!-- 加載提示 -->
<view wx:if="{{isLoading}}" class="loading">加載中...</view>
<view wx:if="{{!hasMore}}" class="no-more">沒有更多數據了</view>

6.CSS 樣式優化體驗
添加加載狀態的樣式：

.loading, .no-more {text-align: center;padding: 20rpx;color: #666;
}

關鍵點解析

• 分頁參數管理：通過?pageNum?跟蹤當前頁碼，每次請求后遞增，確保獲取正確數據。

• 數據合并：使用擴展運算符?...?或?concat?將新舊數組合并，實現無縫追加。

• 加載狀態控制：利用?isLoading?防止重復請求，提升用戶體驗及性能。

• 無數據判斷：根據接口返回的總條數或當前加載數量動態設置?hasMore，精準控制加載終止條件。