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

ljbaofu_CSDN2025-05-23 15:56

在微信小程序中实现分页加载数据列表，可通过以下步骤将后续请求的10条数据追加到首次加载的数据之后：

实现步骤及代码示例

定义页面数据与参数

在页面的 data 中初始化存储列表、页码、加载状态及是否有更多数据的标识：

javascript 复制代码

Page({
  data: {
    list: [],        // 存储所有加载的数据
    pageNum: 1,      // 当前页码
    pageSize: 10,    // 每页数据量
    hasMore: true,   // 是否还有更多数据
    isLoading: false // 防止重复请求
  }
});

首次加载数据

在页面加载时（如 onLoad）调用数据加载方法：

javascript 复制代码

onLoad() {
  this.loadData();
}

3.实现数据加载方法

处理分页请求，合并新旧数据并更新状态：

javascript 复制代码

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 生命周期函数触发加载：

javascript 复制代码

onReachBottom() {
  this.loadData();
}

5.页面渲染与状态提示

在 WXML 中渲染列表及加载状态：

javascript 复制代码

<!-- 列表渲染 -->
<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 样式优化体验

添加加载状态的样式：

javascript 复制代码

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

关键点解析

分页参数管理 ：通过 pageNum 跟踪当前页码，每次请求后递增，确保获取正确数据。
数据合并 ：使用扩展运算符 ... 或 concat 将新旧数组合并，实现无缝追加。
加载状态控制 ：利用 isLoading 防止重复请求，提升用户体验及性能。
无数据判断 ：根据接口返回的总条数或当前加载数量动态设置 hasMore，精准控制加载终止条件。