微信小程式下拉重新整理和上拉載入
阿新 • • 發佈:2018-11-17
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:'沒有更多資料了…^_^' }) } } }) }