小程序 使用scroll-view实现上拉加载，下拉刷新

如图，使用小程序的scroll-view实现的上拉加载数据，下拉刷新数据，试下代码如下：

js文件代码：

[javascript]  view plain  copy

1. var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action";  
2. var page = 1;  
3.   
4. var GetList = function (that) {  
5.     that.setData({  
6.         hidden: false  
7.     });  
8.     wx.request({  
9.         url: url,  
10.         data: {  
11.             pageSize: 10,  
12.             pageNo: page  
13.         },  
14.         success: function (res) {  
15.             var l = that.data.list  
16.             for (var i = 0; i < res.data.length; i++) {  
17.                 l.push(res.data[i])  
18.             }  
19.             that.setData({  
20.                 list: l  
21.             });  
22.             page++;  
23.             that.setData({  
24.                 hidden: true  
25.             });  
26.         }  
27.     });  
28. }  
29. Page({  
30.     data: {  
31.         hidden: true,  
32.         list: [],  
33.         scrollTop: 0,  
34.         scrollHeight: 0  
35.     },  
36.     onLoad: function () {  
37.         var that = this;  
38.         wx.getSystemInfo({  
39.             success: function (res) {  
40.                 console.info(res.windowHeight);  
41.                 that.setData({  
42.                     scrollHeight: res.windowHeight  
43.                 });  
44.             }  
45.         });  
46.     },  
47.     onShow: function () {  
48.         var that = this;  
49.         GetList(that);  
50.     },  
51.     bindDownLoad: function () {  
52.         var that = this;  
53.         GetList(that);  
54.     },  
55.     scroll: function (event) {  
56.         this.setData({  
57.             scrollTop: event.detail.scrollTop  
58.         });  
59.     },  
60.     refresh: function (event) {  
61.         page = 1;  
62.         this.setData({  
63.             list: [],  
64.             scrollTop: 0  
65.         });  
66.         GetList(this)  
67.     },  
68.     onPullDownRefresh: function () {  
69.         console.log("下拉")  
70.     },  
71.     onReachBottom: function () {  
72.         console.log("上拉");  
73.     }  
74. })  

json文件代码

[javascript]  view plain  copy

1. {  
2.     "navigationBarTitleText": "下拉刷新",  
3.     "enablePullDownRefresh": true,  
4.     "backgroundTextStyle": "dark"  
5. }  

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="https://cdn.kuaidi100.com/images/all/56/zhongtong.png"></image>  
6.             <view class="text">  
7.                 <text class="title">{{item.carrierName}}</text>  
8.                 <text class="description">{{item.carrierTelphone}}</text>  
9.                 <text class="description">{{item.carrierId}}</text>  
10.             </view>  
11.         </view>  
12.     </scroll-view>  
13.     <view class="body-view">  
14.         <loading hidden="{{hidden}}" bindchange="loadingChange">  
15.             加载中...  
16.         </loading>  
17.     </view>  
18. </view>  

wxss文件代码

[css]  view plain  copy

1. .container{  
2.     height: 100%;  
3.     padding: 20rpx;  
4. }  
5.   
6. .item{  
7.     display: flex;  
8.     margin-bottom: 50rpx;  
9. width:100%;  
10. background:#f0f0f0;  
11. overflow:hidden;  
12. }  
13.   
14. .img{  
15.     height: 100rpx;  
16.     width: 100rpx;  
17.     border-radius: 50%;  
18. }  
19.   
20. .text{  
21.     display: flex;  
22.     flex-shrink:1;  
23.     flex-grow:1;  
24.     padding: 10rpx;  
25.     flex-wrap: wrap;  
26.     font-size: 50rpx;  
27. }  
28.   
29. .title{  
30.     font-size: 50rpx;  
31.     margin:10rpx 100rpx 10rpx 100rpx;  
32. }  
33. .description{  
34.     font-size: 50rpx;  
35.     align-self:flex-end;  
36. }  

注意，

[javascript]  view plain  copy

1. http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action这个接口就是更具传入的页数，每次返回不同数据。