微信小程序之上拉加载和下拉刷新

微信小程序，最近自己学习微信小程序的知识，就想实现现在APP 那种列表刷新，下拉刷新，上拉加载等功能。 


先开看一下界面

1.wx.request （获取远程服务器的数据，可以理解成$.ajax）


2. scroll-view的两个事件


   2.1 bindscrolltolower（滑到页面底部时）


   2.2 bindscroll (页面滑动时)


   2.3 bindscrolltoupper (滑倒页面顶部时)


然后我们看代码，详细描述。


index.js：

[javascript] view plain copy

 

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.    
11. // 获取数据的方法，具体怎么获取列表数据大家自行发挥  
12. var GetList = function(that){  
13.   that.setData({  
14.     hidden:false  
15.   });  
16.   wx.request({  
17.     url:url,  
18.     data:{  
19.       page : page,  
20.       page_size : page_size,  
21.       sort : sort,  
22.       is_easy : is_easy,  
23.       lange_id : lange_id,  
24.       pos_id : pos_id,  
25.       unlearn : unlearn  
26.     },  
27.     success:function(res){  
28.       //console.info(that.data.list);  
29.       var list = that.data.list;  
30.       for(var i = 0; i < res.data.list.length; i++){  
31.         list.push(res.data.list[i]);  
32.       }  
33.       that.setData({  
34.         list : list  
35.       });  
36.       page ++;  
37.       that.setData({  
38.         hidden:true  
39.       });  
40.     }  
41.   });  
42. }  
43. Page({  
44.  data:{  
45.   hidden:true,  
46.   list:[],  
47.   scrollTop : 0,  
48.   scrollHeight:0  
49.  },  
50.  onLoad:function(){  
51.   //  这里要非常注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值  
52.    var that = this;  
53.    wx.getSystemInfo({  
54.      success:function(res){  
55.        console.info(res.windowHeight);  
56.        that.setData({  
57.          scrollHeight:res.windowHeight  
58.        });  
59.      }  
60.    });  
61.  },  
62.  onShow:function(){  
63.   //  在页面展示之后先获取一次数据  
64.   var that = this;  
65.   GetList(that);  
66.  },  
67.  bindDownLoad:function(){  
68.   //  该方法绑定了页面滑动到底部的事件  
69.    var that = this;  
70.    GetList(that);  
71.  },  
72.  scroll:function(event){  
73.   //  该方法绑定了页面滚动时的事件，我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。  
74.    this.setData({  
75.      scrollTop : event.detail.scrollTop  
76.    });  
77.  },  
78.  refresh:function(event){  
79.   //  该方法绑定了页面滑动到顶部的事件，然后做上拉刷新  
80.    page = 0;  
81.    this.setData({  
82.      list : [],  
83.      scrollTop : 0  
84.    });  
85.    GetList(this)  
86.  }  
87. })  

index.wxml：

[html] view plain copy

 

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