在微信小程序中实现分页加载数据列表，可通过以下步骤将后续请求的10条数据追加到首次加载的数据之后：
实现步骤及代码示例
-
定义页面数据与参数
在页面的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，精准控制加载终止条件。
】常用函数汇总)
)
)
