微信小程序 下拉刷新 上拉触底分页

下拉刷新

1、在需要下拉刷新页面的json配置页，设置"enablePullDownRefresh":true，默认为false

2、在* 页面相关事件处理函数--监听用户下拉动作 *  onPullDownRefresh() 中添加要刷新的内容。

上拉触底

1、在*页面上拉触底事件的处理函数* async onReachBottom() 中添加要触底刷新的内容

2、做分页显示时，需要在函数中添加判断是否为最后一页数据，否则小程序会自动随机读取。

以下为实例代码：

  /**
   * 页面的初始数据
   */
  data: {   
    page:0,//表示第一页
    totalCount:0,//数据条数
    pageSizes:5,//每页显示5条记录
    haveData:true,//数据库中存在记录
  },
  //获取数据库记录数
  getTotalCount(){
    return new Promise((resolve,reject)=>{
      db.collection('cloudOrder').count().then(res=>{      
        this.setData({
          totalCount:res.total
        })
        resolve({status:'ok'})
      }).catch(e=>{
        reject({status:e})
      })
    })    
  },
//获取订单列表
  getOrderList(){
    return new Promise((resolve,reject)=>{        
      const {orderAll,page,pageSizes,totalCount} = this.data;
    //如果为最后一页，则返回
      if(orderAll.length>=totalCount){
        this.setData({
          haveData:false
        })
        return;
      }
      wx.showLoading({
        title: '加载中',
      }) 
   //调用云函数读取多表联合查询的内容
      wx.cloud.callFunction({
        name:"myfunctions",
        data:{
          type:"getOrder",
          page,
          pageSizes
        }
      }).then(res=>{
        wx.hideLoading();      
        if(res.result.status == "success"){
          const {orderAll} = this.data;        
          const newOrderArray = res.result.msg.list//返回的数组数据
          this.setData({
            orderAll:orderAll.concat(newOrderArray)
          })     
          resolve({status:'ok'})  
        }
      }).catch(err=>{
        wx.hideLoading();
        reject(err)
      })
    })
    
  },
   /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    //获取记录数
    await this.getTotalCount();
    //console.log(this.data.totalCount)
    await this.getOrderList();//读取初始化数据
    
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  async onPullDownRefresh() {
    wx.showLoading()
    this.data.page = 0
    await this.getOrderList();//获取订单
    wx.hideLoading()
    wx.stopPullDownRefresh() //下拉刷新处理完毕后，要用wx.stopPullDownRefresh()来关闭
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  async onReachBottom() {
    this.data.page += 1
    console.log(this.data.page)
    await this.getOrderList();
  },