マイクロ信ウィジェットによるリストリフレッシュの実装例の詳細

WeChatウィジェットリストの更新:
微信小プログラムは、最近自分で微信小プログラムの知識を学んで、今のアプリのようなリストのリフレッシュ、ドロップダウンのリフレッシュ、アップロードなどの機能を実現したいと思っています. 
まずインタフェースを見てみましょう
1.wx.request(リモートサーバのデータを取得し、$.ajaxと理解できる)
2.scroll-viewの2つのイベント
2.1 bindscrolltoolower(ページの下部にスライドした場合)
2.2 bindscroll(ページスライド時)
2.3 bindscrolltoupper(ページ上部をスライドさせた場合)
次に、コードを見て、詳しく説明します.
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)
 }
})

index.wxml

  
    
      
      
        {{item.name}}
        {{item.short_description}}