Entwicklung des WeChat-Miniprogramms: Zum Aktualisieren nach unten ziehen, zum Laden nach oben ziehen

In diesem Artikel wird beschrieben, wie Pull-Down-Aktualisierung und Pull-Up implementiert werden, um mehr im WeChat-Miniprogramm zu laden.

Öffnen wir zuerst die Benutzeroberfläche

Die Schnittstelle sieht ungefähr so ​​aus. Diese Demo verwendet mehrere APIs und Ereignisse von WeChat. Ich werde sie zuerst auflisten.

1.wx.request (Daten vom Remote-Server abrufen, kann als $.ajax verstanden werden)

2.2.1 bindscrolltolower (slide Wenn das Ende der Seite erreicht ist)

2.2 bindscroll (wenn die Seite gleitet)

2.3 bindscrolltoupper (wenn es an den oberen Rand der Seite gleitet)

Dann schauen wir mal Schauen Sie sich den Code an und beschreiben Sie ihn im 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>index. wxml<strong><span style="color: #ff0000;"></span></strong> </p><p></p><p class="cnblogs_code"></p>Für weitere WeChat-Miniprogrammentwicklungen ziehen Sie nach unten, um zu aktualisieren, und nach oben, um weitere Artikel zu laden. Bitte achten Sie auf die chinesische PHP-Website! <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>