小程序实现上拉加载,实例代码

小程序实现上拉加载,实例代码

最近在做一个小程序,想实现下拉刷新的功能,刚开始就遇到了一个尴尬的问题,原因是不认真o(╥﹏╥)o
下面是通过摸索总结出的步骤,给寻找问题的同伴提供参考:
下拉刷新分为全局和单页面的:
全局的设置就是在 app.js 中的 Windows 设置 “enablePullDownRefresh”:true,
单页面的设置 是在你想要应用的页面 js中设置 “enablePullDownRefresh”:true,
官方文档
官方的文档
链接:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE
下拉加载 触发时有相应的函数 这个函数在你建立小程序模板时会自动生成,在页面的 js 页面中 不需要自己写

// pages/ces/ces.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

就在这里面,
找到需要调用的函数之后就可以发送请求,加载需要的数据
下面是我的一个例子


Page({

  /**
   * 页面的初始数据
   */
  data: {
    page:1,
    /**
    *这是初始的分页 页码
    */
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    var that=this;
    wx.showNavigationBarLoading() 
    var pages=that.data.page;
    pages+=1;
    /**
    *每次刷新pages就加1
    */
    wx.request({
      url: 'https://xxxx?page='+pages,
      success:function(data){
         setTimeout(function(){
        var ps = data.data.data;
         that.setData({
           products:ps
         })
         }, 1000)
      },
      complete: function () {
        setTimeout(function () {
          // complete
          wx.hideNavigationBarLoading() //完成停止加载
          wx.stopPullDownRefresh() //停止下拉刷新
        }, 1000)  
      }
    })
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

好啦,这样上拉加载就写好了。

猜你喜欢

转载自blog.csdn.net/qq_41502782/article/details/82114466