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

This article mainly introduces "how to realize WeChat Mini Programs's pull-down refresh and pull-up loading". In the daily operation, I believe that many people have doubts about how to realize the pull-down refresh and pull-up loading in WeChat Mini Programs. The editor consulted all kinds of data and sorted out a simple and easy-to-use operation method. I hope it will be helpful to answer the doubts of "how to realize WeChat Mini Programs's pull-down refresh and pull-up loading". Next, please follow the editor to study!

1. The concept and application scenario of drop-down refresh.

Concept: drop-down refresh is an interactive behavior of updating list data on the mobile side. Users can trigger the drop-down refresh of the page and update the list data by swiping their fingers down on the screen.

Application scenario: on mobile, data list is a common page effect, and updating list data is the most basic page requirement. Compared with button refresh and regular refresh, the drop-down refresh user experience is convenient and friendly. It has become the best solution for mobile refresh list data.

WeChat Mini Programs starts the drop-down refresh:

There are two ways:

1. You need to enable enablePullDownRefresh in the window option of app.json or in the page configuration. However, in general, it is recommended to enable the drop-down refresh behavior separately for the required pages in the page configuration.

two。 You can trigger the drop-down refresh through wx.startPullDownRefresh (), and trigger the drop-down refresh animation after the call, and the effect is the same as the user's manual drop-down refresh.

Configure the style of the drop-down refresh window:

You need to modify the backbroundColor and backgroundTextStyle options in the window options in app.json or in the page configuration.

BackgroundColor: used to configure the background color of the drop-down refresh window. Only hexadecimal color values are supported.

BackgroundTextStyle is used to configure the style of the drop-down refresh loading. Only dark and light are supported.

OnPullDownRefresh: page-related event handler function-executes when listening for user drop-down operations

Stop the drop-down refresh effect:

After dealing with ten thousand pull-down refreshes, the loading effect of the drop-down refresh will always be displayed and will not disappear actively. You need to manually hide the loading effect of the drop-down refresh. At this time, the jump wx.stopPullDownRefresh () can stop the drop-down refresh of the current page.

Pull up and load more

1. Pull-up loads more concepts and application scenarios.

Concept: on the mobile side, as the fingers continue to slide up, when the content is about to reach the bottom of the screen, the page will continue to load subsequent content, knowing that there is no new content location, we call it pull-up loading more. Pull-up loading is essentially paged loading of data.

Application scenario: on mobile, the preferred way to load list data in paging is to pull up and load more.

Configure the distance at which the pull-up reaches the bottom:

You can set the distance to hit the bottom in px on the window option of app.json or in the page configuration, and the default distance is 50px.

Monitor pull-up bottoming event: onReachBottom () function, which can listen to the user's pull-up bottoming event on the current page, thus achieving the effect of pulling up and loading more list data.

At this point, the study on "how to realize WeChat Mini Programs's middle and down refresh and pull-up loading" 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.