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

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

实现步骤及代码示例

  1. 定义页面数据与参数

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

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

在页面加载时(如 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,精准控制加载终止条件。

相关推荐
说私域16 分钟前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
一渊之隔3 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun7 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-54587 小时前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
HERR_QQ1 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun2 天前
小程序导航设置更多内容的实现方法
小程序
说私域2 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6682 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳2 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui