微信小程序实现分页加载数据

最新推荐文章于 2025-03-14 10:59:21 发布

wangyh__

最新推荐文章于 2025-03-14 10:59:21 发布

阅读量3.3k

点赞数 4

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/dq0817_/article/details/123234596

版权

该博客详细介绍了如何在微信小程序中实现分页加载数据。通过定义初始数据、请求接口函数以及监听页面的下拉刷新和上拉触底事件，实现了数据的动态加载。在接收到接口返回的数据后，根据当前页数判断是否拼接新数据到列表。WXML部分使用wx:for循环展示数据。这是一个关于微信小程序前端开发的实例教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现分页加载数据要用到页面加载触底事件

onReachBottom: function () {

}

首先在 js 定义初始数据

data: {
//用来接收后端数据
      list:[],
//当前页
      current_page:1
  }

然后定义请求接口函数

article:function(){
    var that = this,list = this.data.list
    wx.request({
      url: '', //接口地址
      data: {
        page:that.data.current_page//当前页
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
           console.log(res)
        //接口数据返回判断当前页是否为第一页 不是第一页将查到的数据拼接到list后
        if(res.data.data.current_page==1){
            that.setData({
               list:res.data.data.data
            })
        }else{
          that.setData({
            list:list.concat(res.data.data.data)
          })
        }
        
      }
    })
  }