Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how Mini Program can achieve pull-up, refresh and drop-down loading". In daily operation, I believe many people have doubts about how Mini Program can achieve pull-up, refresh and drop-down loading. I have consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how Mini Program can achieve pull-up, refresh and pull-down loading". Next, please follow the editor to study!

Pull-up refresh, drop-down load, click tab can also request the server. The best way I think is to pull out the date and month to make a method, then pull up and refresh, drop down and load, click tab to call the date and month methods respectively. I tried Baidu / google and saw the most chain writing to get user data, for example:

/ / the operations here are all illustrated by examples.

WxLogin ()

.then (= > res {

Console.log (res.code)

Return wxRequest.getUserOpenId (url, params) / / request to get user ID

})

.then (= > res {

Console.log (res.openId)

Return wxRequest.getUserPhone (); / / request to obtain the user's mobile phone

})

.catch ()

On the index.js page; getUserOpenId () and getUserPhone () are encapsulated in another js. Or directly getUserMessage (). Then (res= >). Catch (); this fetches user data directly.

WxRequest.getUserMessage ()

.then (= > res {

Console.log (res.code)

})

.catch ()

Of course, I still can't illustrate what's wrong with this example, so what if I want to get the date data as shown above, what about the month data? Is it possible to write as the first one, pull up the load and write a pile there, drop down and refresh the pile there, and switch tab to write a bunch of repetitive code? Or do I care if you pull up and refresh, or drop down and load, and I get the data directly through an interface? So through Baidu / google, I found that their writing is not perfect (not bad).

My way of writing:

/ / I'm just taking part of my code to show

Page ({

Data: {

}

OnLoad: function () {/ / Lifecycle

This.readUserMesage ()

}

ReadUserMesage (): function () {/ / get user information and get data by date

This.showLoading ()

Let parameters = 'user?ptId=aaaaaaaaaaaaaa'

Api.getRequest ({

Parameters: parameters

}) .then (res = > {

Return this.readDayData (); / / get date information

}) .catch (error = > {

This.hideLoading ()

})

}

ReadMonthData () {/ / extract the month separately

Var url = 'dailypay?xxxxx=aaaa&yyy=bbbbbb'

Var parameters = {parameters: url}

Return api.getRequest (parameters) / / I encapsulate the request server here, notice that I added return

.then (res = > {

/ / you can get the collection data of the returned res here.

}) .catch (error = > {

Console.log (JSON.stringify (error))

This.hideLoading ()

})

}

ReadDayData () {/ / extract the date separately

Var url = 'dailypay?xxxxx=aaaa&yyy=bbbbbb'

Var parameters = {parameters: url}

Return api.getRequest (parameters) / / I encapsulate the request server here, notice that I added return

.then (res = > {

/ / you can get the collection data of the returned res here.

}) .catch (error = > {

This.hideLoading ()

})

}

OnPullDownRefresh () {/ / drop-down refresh

If (this.data.currentIndex = = 0) {/ / if the date is currently on

This.readDayData ()

} else {/ / if the current is the month

This.readMonthData ()

}

}

OnReachBottom () {/ / pull-up load

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

This.readDayData ()

} else {

This.readMonthData ()

}

}

)}

At this point, on the "Mini Program how to achieve pull-up refresh drop-down load" study is over, I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.