Detailed explanation of the implementation method of pull-down refresh and pull-up loading in WeChat applet

Two implementation methods for WeChat mini program pull-down refresh and pull-up loading. 1. Use the "onPullDownRefresh" and "onReachBottom" methods to implement pull-down refresh and pull-up loading for the mini program. 2. Set bindscrolltoupper and bindscrolltolower in scroll-view to achieve this. WeChat mini program pulls down to refresh and pulls up to load.

1. Use the "onPullDownRefresh" and "onReachBottom" methods

Write the "onPullDownRefresh" and "onReachBottom" methods directly in the js file;

xml

<scroll-view scroll-y = true >    
    .........
</scroll-view>

js

onPullDownRefresh: function() {
    // Do something when pull down.
     console.log('刷新');
 },
 onReachBottom: function() {
    // Do something when page reach bottom.
     console.log('circle 下一页');
 },

2. Set bindscrolltoupper and bindscrolltolower in scroll-view

Set bindscrolltoupper and bindscrolltolower in scroll-view, and then write the trigger event in js corresponding method. [Note, you must set the height of scroll-view when using this mode. I 100% don’t know why the setting has no effect. It is recommended to use 100vh]

xml

<scroll-view scroll-y = true bindscrolltolower="loadMore" bindscrolltoupper="refesh">
    ..........
</scroll-view>

js

onPullDownRefresh: function() {
    // Do something when pull down.
     console.log('刷新');
 },
 onReachBottom: function() {
    // Do something when page reach bottom.
     console.log('circle 下一页');
 },

The above is the detailed content of Detailed explanation of the implementation method of pull-down refresh and pull-up loading in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!