微信小程序开发中，请求数据列表，第一次请求10条，滑动到最低自动再请求10条，后面请求的10条怎么加到第一次请求的10条后面？

在微信小程序中实现分页加载数据列表，可通过以下步骤将后续请求的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，精准控制加载终止条件。