微信小程式，最近自己學習微信小程式的知識，就想實現現在APP 那種列表重新整理，下拉重新整理，上拉載入等功能。 


先開看一下介面

1.wx.request （獲取遠端伺服器的資料，可以理解成$.ajax）


2. scroll-view的兩個事件


   2.1 bindscrolltolower（滑到頁面底部時）


   2.2 bindscroll (頁面滑動時)


   2.3 bindscrolltoupper (滑倒頁面頂部時)


然後我們看程式碼，詳細描述。


index.js：

1. var url = "http://www.imooc.com/course/ajaxlist"
   ;  
2. var page =0;  
3. var page_size = 20;  
4. var sort = "last";  
5. var is_easy = 0;  
6. var lange_id = 0;  
7. var pos_id = 0;  
8. var unlearn = 0;  
9. // 獲取資料的方法，具體怎麼獲取列表資料大家自行發揮
10. var GetList = function(that){  
11.   that.setData({  
12.     hidden:false
13.   });  
14.   wx.request({  
15.     url:url,  
16.     data:{  
17.       page : page,  
18.       page_size : page_size,  
19.       sort : sort,  
20.       is_easy : is_easy,  
21.       lange_id : lange_id,  
22.       pos_id : pos_id,  
23.       unlearn : unlearn  
24.     },  
25.     success:function(res){  
26.       //console.info(that.data.list);
27.       var list = that.data.list;  
28.       for(var i = 0; i < res.data.list.length; i++){  
29.         list.push(res.data.list[i]);  
30.       }  
31.       that.setData({  
32.         list : list  
33.       });  
34.       page ++;  
35.       that.setData({  
36.         hidden:true
37.       });  
38.     }  
39.   });  
40. }  
41. Page({  
42.  data:{  
43.   hidden:true,  
44.   list:[],  
45.   scrollTop : 0,  
46.   scrollHeight:0  
47.  },  
48.  onLoad:function(){  
49.   //  這裡要非常注意，微信的scroll-view必須要設定高度才能監聽滾動事件，所以，需要在頁面的onLoad事件中給scroll-view的高度賦值
50.    var that = this;  
51.    wx.getSystemInfo({  
52.      success:function(res){  
53.        console.info(res.windowHeight);  
54.        that.setData({  
55.          scrollHeight:res.windowHeight  
56.        });  
57.      }  
58.    });  
59.  },  
60.  onShow:function(){  
61.   //  在頁面展示之後先獲取一次資料
62.   var that = this;  
63.   GetList(that);  
64.  },  
65.  bindDownLoad:function(){  
66.   //  該方法綁定了頁面滑動到底部的事件
67.    var that = this;  
68.    GetList(that);  
69.  },  
70.  scroll:function(event){  
71.   //  該方法綁定了頁面滾動時的事件，我這裡記錄了當前的position.y的值,為了請求資料之後把頁面定位到這裡來。
72.    this.setData({  
73.      scrollTop : event.detail.scrollTop  
74.    });  
75.  },  
76.  refresh:function(event){  
77.   //  該方法綁定了頁面滑動到頂部的事件，然後做上拉重新整理
78.    page = 0;  
79.    this.setData({  
80.      list : [],  
81.      scrollTop : 0  
82.    });  
83.    GetList(this)  
84.  }  
85. })  

1. <viewclass="container">
2.   <scroll-viewscroll-top="{{scrollTop}}"scroll-y="true"style="height:{{scrollHeight}}px;"
3.     class="list"bindscrolltolower="bindDownLoad"bindscroll="scroll"bindscrolltoupper="refresh">
4.     <viewclass="item"wx:for="{{list}}">
5.       <imageclass="img"src="{{item.pic_url}}"></image>
6.       <viewclass="text">
7.         <textclass="title">{{item.name}}</text>
8.         <textclass="description">{{item.short_description}}</text>
9.       </view>
10.     </view>
11.   </scroll-view>
12.   <viewclass="body-view">
13.     <loadinghidden="{{hidden}}"bindchange="loadingChange">
14.       載入中...  
15.     </loading>
16.   </view>
17. </view>