Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how WeChat Mini Programs realizes the drop-down refresh interface". The editor shows you the operation process through the actual case, the operation method is simple and fast, and the practicality is strong. I hope this article "how to achieve the drop-down refresh interface by WeChat Mini Programs" can help you solve the problem.

The implementation of WeChat Mini Programs's drop-down refresh interface

Setting the drop-down refresh function with onPullDownRefresh function

1. In app.json, set enablePullDownRefresh in the window option to true

"window": {"enablePullDownRefresh": true}

Or set enablePullDownRefresh to true in the XXX.json of the interface to be refreshed

{"enablePullDownRefresh": true}

Second, use the onPullDownRefresh function to define the drop-down action and request the data update from the background with wx.request ().

/ / drop-down refresh onPullDownRefresh:function () {/ / dynamically set the navigation bar title wx.setNavigationBarTitle ({title:''}); wx.showNavigationBarLoading (); / / display the load icon let url = app.globalConfig.pre_api + "/ api/user/getUserInfo.php" in the title bar; / / define the requested path let user_id = app.globalData.user_id according to the actual situation / / request parameter let flag = true; let that = this; / / verify the validity of the parameter flag = app.isParameterdValidate (user_id,' the user does not exist'); if (flag = = false) {return } / / send request wx.request ({url: url, data: {user_id: user_id,}, method: 'POST', / / request successful function processing success: function (res) {app.globalData.balance = res.data.data.balance; / / a pair of data updates that.setData ({balance: app.globalData.balance,}) }, fail: function (res) {/ / failed request processing console.log (res.data.msg);}, complete: function () {wx.hideNavigationBarLoading (); / / complete stop loading / / dynamically set navigation bar title wx.setNavigationBarTitle ({title:'my'}); wx.stopPullDownRefresh () / / stop the drop-down refresh}}) this is the end of the content about "how WeChat Mini Programs implements the drop-down refresh interface". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.