小程序下拉刷新,上拉加载更多

2019-01-16  本文已影响0人  海珊瑚123

小程序上拉加载:onReachBottom
小程序下拉刷新:onPullDownRefresh
json里面需要设置 "enablePullDownRefresh": true,
1.设置第几页page,设置每页的数量limit

2.设置一个空数组contentList存放每次请求的数据,存储方式contentList.concat(res),当为第一页的时候contentList设为空。
当请求的数量的长度大于等于每页的数量时,page+1,当小于每页的数量时,代表已经没有更多数据了,page的值不变。

page({
 data:{
    page:1,      //第几页
    limit:10,      //每页的数量
    orderList:''   //列表数据
  },

  orderList:function(){
    let that = this;
   //这里省略请求,假设请求成功每次请求的数据为 res,在success中做如下操作
    let contentList = that.data.orderList;
    if(that.data.page == 1){    
        //第一页的时候直接赋值,contentList  为空避免数据重复
          contentList = []; 
          that.setData({
              orderList:res
          })
      }
    if(res.length < that.data.limit){
          that.setData({
                 orderList:contentList.concat(res),
                 hasMoreData:false,   //没有数据了
            })
    }else{
          that.setData({
                that.setData({
                    orderList:contentList.concat(res),
                    hasMoreData:true,    //还有数据
                    page:that.data.page + 1
                })
        })
    }
  },
    // 上拉加载数据
  onReachBottom: function () {
    if (this.data.hasMoreData) {
      this.orderList()
    } else {
      wx.showToast({
        title: '没有更多数据',
      })
    }
  },
 // 下拉刷新数据
  onPullDownRefresh: function (res) {
    this.data.page = 1
    this.orderList()
    setTimeout(function () {   //这里是防止下拉的回不去,回去效果卡顿
      wx.stopPullDownRefresh()
    }, 1000)
  },

})
上一篇下一篇

猜你喜欢

热点阅读