WeChat mini program development: pull down to refresh, pull up to load more

This article records how to implement pull-down to refresh and pull-up to load more in the WeChat applet

First open the interface and take a look

The interface is roughly like this. This Demo uses several APIs and events of WeChat. I will list them first.

1.wx.request (obtain data from the remote server, which can be understood as $.ajax)

2. Two events of scroll-view

2.1 bindscrolltolower (slide When reaching the bottom of the page)

2.2 bindscroll (when the page slides)

2.3 bindscrolltoupper (when it slides to the top of the page)

Then let’s look at the code and describe it in detail.

index.js

var url = "http://www.imooc.com/course/ajaxlist";var page =0;var page_size = 20;var sort = "last";var is_easy = 0;var lange_id = 0;var pos_id = 0;var unlearn = 0;// 获取数据的方法，具体怎么获取列表数据大家自行发挥var GetList = function(that){
    that.setData({
        hidden:false
    });
    wx.request({
        url:url,
        data:{
            page : page,
            page_size : page_size,
            sort : sort,
            is_easy : is_easy,
            lange_id : lange_id,
            pos_id : pos_id,
            unlearn : unlearn
        },
        success:function(res){            //console.info(that.data.list);
            var list = that.data.list;            for(var i = 0; i <p></p><p><strong><span style="color: #ff0000;">index.wxml</span></strong></p><p> </p><p class="cnblogs_code"></p><pre class="brush:php;toolbar:false"><view>
    <scroll-view>
        <view>
            <image></image>
            <view>
                <text>{{item.name}}</text>
                <text>{{item.short_description}}</text>
            </view>
        </view>
    </scroll-view>
    <view>
        <loading>
            加载中...        </loading>
    </view></view>

For more WeChat mini-program development, pull down to refresh, pull up to load more. For related articles, please pay attention to the PHP Chinese website!