小程序怎么實現上拉刷新下拉加載

這篇文章主要介紹“小程序怎么實現上拉刷新下拉加載”，在日常操作中，相信很多人在小程序怎么實現上拉刷新下拉加載問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”小程序怎么實現上拉刷新下拉加載”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　上拉刷新，下拉加載，分別點擊tab都還能夠請求服務器。我想的最好的方法是把日期和月份這2個抽離出來做成一個方法，然后上拉刷新，下拉加載，點擊tab分別調用日期和月份方法即可。我嘗試百度/google，見到最多的鏈式寫法，以獲取用戶數據舉例：

　　//這里的操作都是舉例說明。

　　wxLogin()

　　.then(=>res{

　　console.log(res.code)

　　return wxRequest.getUserOpenId(url, params)//請求獲取用戶ID

　　})

　　.then(=>res{

　　console.log(res.openId)

　　return wxRequest.getUserPhone());//請求獲取用戶手機

　　})

　　.catch()

　　在index.js頁面 ; getUserOpenId()和getUserPhone()都是封裝在另外一個js里面的。或者是直接getUserMessage().then(res=>).catch();這樣直接獲取用戶數據了。

　　wxRequest.getUserMessage()

　　.then(=>res{

　　console.log(res.code);

　　})

　　.catch()

　　當然我這樣舉例還是不能說明存在什么問題，那么如果我要像上面圖那樣獲取日期數據，月份數據怎么辦呢?難道按照第一個那樣寫，上拉加載那里寫一堆，下拉刷新那里一堆，切換tab也寫一堆重復的代碼?還是說我管你是上拉刷新，還是下拉加載好，我直接通過一個接口在一起獲取數據?所以我通過百度/google到他們寫的還不夠完善(不是寫的不好哈)

　　我的寫法：

　　//我只是抽取我部分代碼來展示

　　Page({

　　data:{

　　},

　　onLoad: function () {//生命周期

　　this.readUserMesage();

　　},

　　readUserMesage(): function () {//獲取用戶信息，并獲取按日期的數據

　　this.showLoading();

　　let parameters = 'user?ptId=aaaaaaaaaaaaaa';

　　api.getRequest({

　　parameters: parameters,

　　}).then(res => {

　　return this.readDayData(); //獲取日期信息

　　}).catch(error => {

　　this.hideLoading();

　　});

　　},

　　readMonthData() {//把月份單獨抽取出來

　　var url = 'dailypay?xxxxx=aaaa&yyy=bbbbbb';

　　var parameters = { parameters: url }

　　return api.getRequest(parameters)//我這里是封裝請求服務器的，注意我加了return

　　.then(res => {

　　//這里就可以獲取到返回的res的集合數據

　　}).catch(error => {

　　console.log(JSON.stringify(error));

　　this.hideLoading();

　　});

　　},

　　readDayData() {//把日期單獨抽取出來

　　var url = 'dailypay?xxxxx=aaaa&yyy=bbbbbb';

　　var parameters = { parameters: url }

　　return api.getRequest(parameters)//我這里是封裝請求服務器的，注意我加了return

　　.then(res => {

　　//這里就可以獲取到返回的res的集合數據

　　}).catch(error => {

　　this.hideLoading();

　　});

　　},

　　onPullDownRefresh() {//下拉刷新

　　if (this.data.currentIndex == 0) {//如果當前是在日期

　　this.readDayData();

　　} else {//如果當前是在月份

　　this.readMonthData();

　　}

　　},

　　onReachBottom() {//上拉加載

　　if (this.data.currentIndex == 0) {

　　this.readDayData();

　　} else {

　　this.readMonthData();

　　}

　　},

　　)}

到此，關于“小程序怎么實現上拉刷新下拉加載”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！