Entwicklung des WeChat-Miniprogramms: Zum Aktualisieren nach unten ziehen, zum Laden nach oben ziehen-Mini-Programmentwicklung-php.cn

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

高洛峰

Freigeben： 2017-02-16 10:15:40

Original

2017 Leute haben es durchsucht

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 < res.data.list.length; i++){
                list.push(res.data.list[i]);
            }
            that.setData({
                list : list
            });
            page ++;
            that.setData({
                hidden:true
            });
        }
    });
}
Page({
  data:{
    hidden:true,
    list:[],
    scrollTop : 0,
    scrollHeight:0
  },
  onLoad:function(){    //   这里要非常注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值
      var that = this;
      wx.getSystemInfo({
          success:function(res){
              console.info(res.windowHeight);
              that.setData({
                  scrollHeight:res.windowHeight
              });
          }
      });
  },
  onShow:function(){    //   在页面展示之后先获取一次数据
    var that = this;
    GetList(that);
  },
  bindDownLoad:function(){    //   该方法绑定了页面滑动到底部的事件
      var that = this;
      GetList(that);
  },
  scroll:function(event){    //   该方法绑定了页面滚动时的事件，我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
     this.setData({
         scrollTop : event.detail.scrollTop
     });
  },
  refresh:function(event){    //   该方法绑定了页面滑动到顶部的事件，然后做上拉刷新
      page = 0;      this.setData({
          list : [],
          scrollTop : 0
      });
      GetList(this)
  }
})

Nach dem Login kopieren

index. wxml

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!

<view class="container">
    <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" 
        class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">
        <view class="item" wx:for="{{list}}">
            <image class="img" src="{{item.pic_url}}"></image>
            <view class="text">
                <text class="title">{{item.name}}</text>
                <text class="description">{{item.short_description}}</text>
            </view>
        </view>
    </scroll-view>
    <view class="body-view">
        <loading hidden="{{hidden}}" bindchange="loadingChange">
            加载中...        </loading>
    </view></view>

Nach dem Login kopieren