美文网首页
小程序下拉刷新,上拉加载更多

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

作者: 海珊瑚123 | 来源:发表于2019-01-16 15:37 被阅读0次

    小程序上拉加载: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)
      },
    
    })
    

    相关文章

      网友评论

          本文标题:小程序下拉刷新,上拉加载更多

          本文链接:https://www.haomeiwen.com/subject/fpbpdqtx.html