微信小程序之下拉加载和上拉刷新详解手机开发

 1 <!--index.wxml--> 
 2 <view class="container" style="padding:0rpx"> 
 3   <!--垂直滚动，这里必须设置高度--> 
 4     <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;"  
 5         class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad"  bindscroll="scroll"> 
 6         <view class="item" wx:for="{{list}}"> 
 7             <image class="img" src="{{item.pic_url}}"></image> 
 8             <view class="text"> 
 9                 <text class="title">{{item.name}}</text> 
10                 <text class="description">{{item.short_description}}</text> 
11             </view> 
12         </view> 
13     </scroll-view> 
14     <view class="body-view"> 
15         <loading hidden="{{hidden}}" bindchange="loadingChange"> 
16             加载中... 
17         </loading> 
18     </view> 
19 </view>

 1 var url = "http://www.imooc.com/course/ajaxlist"; 
 2 var page =0; 
 3 var page_size = 5; 
 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 loadMore = 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               that.setData({ 
56                   scrollHeight:res.windowHeight 
57               }); 
58           } 
59       }); 
60        loadMore(that); 
61   }, 
62   //页面滑动到底部 
63   bindDownLoad:function(){    
64       var that = this; 
65       loadMore(that); 
66       console.log("lower"); 
67   }, 
68   scroll:function(event){ 
69     //该方法绑定了页面滚动时的事件，我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。 
70      this.setData({ 
71          scrollTop : event.detail.scrollTop 
72      }); 
73   }, 
74   topLoad:function(event){ 
75     //   该方法绑定了页面滑动到顶部的事件，然后做上拉刷新 
76       page = 0; 
77       this.setData({ 
78           list : [], 
79           scrollTop : 0 
80       }); 
81       loadMore(this); 
82       console.log("lower"); 
83   } 
84 })

 1 /**index.wxss**/ 
 2  
 3 .userinfo { 
 4   display: flex; 
 5   flex-direction: column; 
 6   align-items: center; 
 7 } 
 8  
 9 .userinfo-avatar { 
10   width: 128rpx; 
11   height: 128rpx; 
12   margin: 20rpx; 
13   border-radius: 50%; 
14 } 
15  
16 .userinfo-nickname { 
17   color: #aaa; 
18 } 
19  
20 .usermotto { 
21   margin-top: 200px; 
22 } 
23  
24 /**/ 
25  
26 scroll-view { 
27   width: 100%; 
28 } 
29  
30 .item { 
31   width: 90%; 
32   height: 300rpx; 
33   margin: 20rpx auto; 
34   background: brown; 
35   overflow: hidden; 
36 } 
37  
38 .item .img { 
39   width: 430rpx; 
40   margin-right: 20rpx; 
41   float: left; 
42 } 
43  
44 .title { 
45   font-size: 30rpx; 
46   display: block; 
47   margin: 30rpx auto; 
48 } 
49  
50 .description { 
51   font-size: 26rpx; 
52   line-height: 15rpx; 
53 }