How to implement the pull-down function to refresh the page in the mini program?

How to implement the pull-down function to refresh the page in the mini program? The following article will introduce to you how to implement pull-down refresh in the WeChat applet interface. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

In the WeChat mini program, refreshing the page through pull-down is a basic operation. When the current page is full, continue to pull down to load more content. Both mini programs and web pages can implement this function. The difference is that the mini program interface has an API that can implement the pull-down refresh function, which only needs to be called from the system.

By looking at the WeChat development documentation, we can see that the enablePullDownRefresh attribute is set to true. Pull-down refresh is enabled by default. enablePullDownRefresh can be written in app.json and the page's xxx.json. The difference between the two is that app.json is a global pull-down refresh, while ***.json is a single-page pull-down refresh. Only window-related settings can be set. Configuration item to determine the window performance of this page, so there is no need to write the window key. Another method is to listen to scroll-view and customize the pull-down refresh. There is a bindscrolltoupper attribute in scroll-view. When scrolling to the top/left, the scrolltoupper event will be triggered, so we can use this attribute to implement the pull-down refresh function.

Both methods are available. The first one is relatively simple and easy to use. After all, some logic systems have already been processed for you. The second one is suitable for small programs that want to customize the pull-down refresh style. We When explaining e-commerce, just use the first one, which is provided by the system. The main purpose is to teach everyone how to use it.

1. home.json parameter configuration

enablePullDownRefresh: true

Which page we need to pull down to refresh will be in the corresponding xxx.json of that page The above attribute is configured in the file. You can also know from the literal meaning of this attribute whether pull-down refresh is allowed. Of course, if you don’t want to configure each configuration to allow pull-down refresh, you can directly configure the above attribute in the window of the global variable app.json, so that the entire All projects allow pull-down refresh. This must be added because the system does not have the pull-down refresh function by default.

home.js

//下拉刷新
onPullDownRefresh:function()
{
wx.showNavigationBarLoading() //在标题栏中显示加载
//模拟加载
setTimeout(function()
{
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
},1500);
},

onPullDownRefresh pull-down refresh event monitoring, take a look at the details inside Code, wx.showNavigationBarLoading() and wx.hideNavigationBarLoading() are used to control the display and hiding of the little chrysanthemum. Since we have not yet explained the network request, I simulated the network loading and used the setTimeout method. Write a time delay method. This method can simulate the time consumed by network loading. Also, when the network loading is completed, we need to stop the pull-down refresh wx.stopPullDownRefresh().

Load more

There are two ways to load more

1. Call the system API

2. Monitor scroll-view, bindscrolltolower slides to the bottom of the monitor

The processing method is slightly different from the pull-down refresh, but it is similar.

home.js

onReachBottom: function () {
console.log(\'加载更多\')
setTimeout(() => {
this.setData({
isHideLoadMore:true,
recommends: [
{
goodId: 7,
name:\'.....\',
url: \'....\',
imageurl:\'......\',
},
{
goodId: 10,
name:\'......\',
url:\'......\',
},
],
})
}, 1000)
}

onReachBottom system provides monitoring of bottoming events. Just like pull-down refresh, we also simulate some data and add a time-delayed event, isHideLoadMore, a custom The value is used to control the display and hiding of the loading control

home.wxml

Loading

The method to implement pull-down refresh in the applet is also There are others that can imitate the H5 web page, but because of the use of API interfaces, WeChat applet can reduce the burden on developers when implementing the pull-down refresh function.

Recommendation: " Mini Program Development Tutorial"

The above is the detailed content of How to implement the pull-down function to refresh the page in the mini program?. For more information, please follow other related articles on the PHP Chinese website!