微信小程序下拉刷新和上拉加载

example One:如果所有页面都要开启下拉刷新功能:

aap.json中:
"window":{
      "enablePullDownRefresh":true, //开启下拉刷新功能
      "navigationBarTextStyle":"dark"
}

每个页面对应的js中:
Page({
      onPullDownRefresh: function () {
            this.init();//初始化页面的接口请求
            wx.stopPullDownRefresh();//关闭下拉刷新
     }
})

//=======================================================================================

example Two:如果是单个页面开启下拉刷新:

对应页面的json中:
{
      "enablePullDownRefresh":true,//开启下拉刷新功能
      "backgroundTextStyle":"dark"
}

对应页面的js中:
Page({
      onPullDownRefresh: function () {
            this.init();//初始化页面的接口请求
            wx.stopPullDownRefresh();//关闭下拉刷新
      }
})

//=======================================================================================

example Three:如果是单个页面开启下拉刷新和上拉加载更多:

对应页面的json中:
{
      "enablePullDownRefresh":true,//开启下拉刷新功能
      "onReachBottomDistance":50, //上拉的距离
      "backgroundTextStyle":"dark"
}

对应页面的js中:
data{
      overtimeList:[],            //页面渲染的数据
      pageNum:0,               //第几页/或者从第几条数据开始(根据后台接口的条件,我这里是第二种)
      sayloading:' '              //上拉的文字显示
}

//下拉刷新
onPullDownRefresh: function () {
      this.setData({
          pageNum: 0,
          sayloading: ""
      })
      this.init();
      wx.stopPullDownRefresh()
},

//上拉加载
onReachBottom:function (){
      let pageNum=this.data.pageNum;
      pageNum=pageNum+10
      this.setData({
          pageNum:pageNum,
          sayloading:"数据加载中..."
      })
      this.init();
      wx.hideLoading();// 隐藏加载框
},

init:function(){
      wx.request({
            url: getApp().data.service_url + 'api',
            data: {
                  id: getApp().data.id++,
                  sign: "666666",
                  sessionId: wx.getStorageSync('sessionId'),
                  pageNum: this.data.pageNum,    //第几条数据,每次+10(上拉加载方法中)
                  pageSize: '10',     //每页显示10条数据
           },
          header: {
                  'content-type': 'application/x-www-form-urlencoded'
          },
          success: function (res) {
               var overtimeListArr = this.data.overtimeList;
               for (var i = 0; i < res.data.data.overtimeList.length; i++) {
                   overtimeListArr.push(res.data.data.overtimeList[i])
               }
               if (this.data.pageNum==0){    //下拉刷新
                   this.setData({
                       overtimeList: res.data.data.overtimeList,
                   })
              }else{
                   this.setData({
                       overtimeList: overtimeListArr,
                   })
            }
            if (res.data.data.overtimeList.length<=0){
                   this.setData({
                       sayloading:'没有更多数据了…^_^'
                   })
            }
        }
    })
}

猜你喜欢

转载自blog.csdn.net/Mh_ui/article/details/79106590