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

伊谢尔伦
Release: 2017-05-30 09:57:54
Original
3749 people have browsed it

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>
Copy after login

js

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

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>
Copy after login

js

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


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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template