微信小程序开发中,请求数据列表,第一次请求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,精准控制加载终止条件。

相关推荐
说私域7 小时前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往7 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw7 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
weixin_lynhgworld10 小时前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序
996幸存者12 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮13 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
The_era_achievs_hero20 小时前
UniappDay03
vue.js·微信小程序·uni-app
说私域1 天前
技术赋能与营销创新:开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化路径研究
人工智能·小程序·开源
游戏开发爱好者82 天前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld2 天前
代驾小程序系统开发:引领出行行业数字化转型
小程序