微信小程序简单实现上拉刷新和下拉加载

最新推荐文章于 2025-03-13 09:51:25 发布

ymwlchina

最新推荐文章于 2025-03-13 09:51:25 发布

阅读量409

点赞数

文章标签：小程序 javascript 前端

本文链接：https://blog.youkuaiyun.com/ymwlchina/article/details/127783432

版权

该代码段展示了如何在微信小程序中实现页面数据的初始化、动态加载和下拉刷新功能。`onLoad`函数用于页面加载时获取数据，`getRechargeDetail`是数据加载函数，利用`request`进行API调用。`onPullDownRefresh`处理下拉刷新，重置页码并重新获取数据；`onReachBottom`监听上拉触底事件，触发更多数据加载。细节列表`detailList`在WXML中渲染。

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

找到对应的js文件

 /**
   * 页面的初始数据
   */
  data: {
    detailList:[],page:1
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    this.getRechargeDetail();
  },
getRechargeDetail:function (){
//数据加载函数
    var that=this;
    common.request({
      endpoint:"Balance/balance/recharge_detail",
      method:"post",
      data:{
        page:that.data.page,
        limit:10
      },
      success(res){
        if(res.extra.length>0){
          let details=that.data.page==1?res.extra:that.data.detailList.concat(res.extra);
          that.setData({
            detailList:details,
            page:that.data.page+1
          });
        }
      }
    })
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    let that=this;
    that.setData({
      page:1
    })
    that.getRechargeDetail();

  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('页面上拉触底事件的处理函数');
    this.getRechargeDetail();
  },

最后在wxml渲染detailList变量即可