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

微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善.

上gif:

原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法.

1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字.

2.上拉加载,在滑动到底部时,bindscrolltolower被调用,我这里是页数加一,根据自己的业务逻辑修改,然后将获取到的集合添加到scroll-view的数据集合里即可.

上代码:

1.index.js

[javascript]  view plain  copy

 

1. //index.js  
2. //获取应用实例  
3. var app = getApp()  
4. Page({  
5.   data: {  
6.     words: [],  
7.     windowHeight: 0,//获取屏幕高度  
8.     refreshHeight: 0,//获取高度  
9.     refreshing: false,//是否在刷新中  
10.     refreshAnimation: {}, //加载更多旋转动画数据  
11.     clientY: 0,//触摸时Y轴坐标  
12.   },  
13.   onLoad: function () {  
14.     var _this = this;  
15.     //获取屏幕高度  
16.     wx.getSystemInfo({  
17.       success: function (res) {  
18.         _this.setData({  
19.           windowHeight: res.windowHeight  
20.         })  
21.         console.log("屏幕高度: " + res.windowHeight)  
22.       }  
23.     })  
24.     //获取words  
25.     wx.request({  
26.       url: 'http://api.avatardata.cn/ChengYu/Search?key=77f072d28eb141c8b6dda145ca364b92&keyWord=好',  
27.       complete: function (res) {  
28.         if (res.data.reason == 'Succes') {  
29.           _this.setData({  
30.             words: res.data.result  
31.           })  
32.         }  
33.       }  
34.     })  
35.   },  
36.   scroll: function () {  
37.     console.log("滑动了...")  
38.   },  
39.   lower: function () {  
40.     var start = 0;  
41.     start += 1;  
42.     console.log("加载了...")  
43.     var _this = this;  
44.     wx.request({  
45.       url: 'http://api.avatardata.cn/ChengYu/Search',  
46.       data: {  
47.         key: '77f072d28eb141c8b6dda145ca364b92', keyWord: '好', page: start  
48.       },  
49.       complete: function (res) {  
50.         if (res.data.reason == 'Succes') {  
51.           var words = _this.data.words.concat(res.data.result);  
52.           _this.setData({  
53.             words: words  
54.           })  
55.         }  
56.       }  
57.     })  
58.   },  
59.   upper: function () {  
60.     console.log("下拉了....")  
61.     //获取用户Y轴下拉的位移  
62.   
63.     if (this.data.refreshing) return;  
64.     this.setData({ refreshing: true });  
65.     updateRefreshIcon.call(this);  
66.     var _this = this;  
67.     var i = Math.random() //获得0-1的随机数  
68.     i = Math.ceil(i * 10) //乘以10并向上去整  
69.     var words = ['龙', '一', '万', '千', '浩', '金', '得', '而', '可', '人'];  
70.     var word = words[i];  
71.     wx.request({  
72.       url: 'http://api.avatardata.cn/ChengYu/Search?key=77f072d28eb141c8b6dda145ca364b92&keyWord=' + word,  
73.   
74.       complete: function (res) {  
75.         if (res.data.reason == 'Succes') {  
76.           setTimeout(function () {  
77.             _this.setData({  
78.               words: res.data.result  
79.             })  
80.           }, 2000)  
81.         }  
82.         setTimeout(function () {  
83.           _this.setData({  
84.             refreshing: false  
85.           })  
86.         }, 2500)  
87.       }  
88.     })  
89.   },  
90.   start: function (e) {  
91.     var startPoint = e.touches[0]  
92.     var clientY = startPoint.clientY;  
93.     this.setData({  
94.       clientY: clientY,  
95.       refreshHeight: 0  
96.     })  
97.   },  
98.   end: function (e) {  
99.     var endPoint = e.changedTouches[0]  
100.     var y = (endPoint.clientY - this.data.clientY) * 0.6;  
101.     if (y > 50) {  
102.       y = 50;  
103.     }  
104.     this.setData({  
105.       refreshHeight: y  
106.     })  
107.   },  
108.   move: function (e) {  
109.     console.log("下拉滑动了...")  
110.   }  
111. })  
112.   
113. /** 
114.  * 旋转上拉加载图标 
115.  */  
116. function updateRefreshIcon() {  
117.   var deg = 0;  
118.   var _this = this;  
119.   console.log('旋转开始了.....')  
120.   var animation = wx.createAnimation({  
121.     duration: 1000  
122.   });  
123.   
124.   var timer = setInterval(function () {  
125.     if (!_this.data.refreshing)  
126.       clearInterval(timer);  
127.     animation.rotateZ(deg).step();//在Z轴旋转一个deg角度  
128.     deg += 360;  
129.     _this.setData({  
130.       refreshAnimation: animation.export()  
131.     })  
132.   }, 1000);  
133. }  

2.index.wxml

[html]  view plain  copy

 

1. <!--index.wxml-->  
2.   <view class="refresh-block" style="height: {{refreshHeight}}px;" wx:if="{{refreshing}}">  
3.     <image animation="{{refreshAnimation}}" src="../images/refresh.png"></image>  
4.   </view>  
5. <scroll-view scroll-y="true" style="height: {{windowHeight}}px;" bindscroll="scroll" bindscrolltolower="lower" bindscrolltoupper="upper"  
6. catchtouchmove="move" catchtouchstart="start" catchtouchend="end"  
7. >  
8. <block wx:for="{{words}}">  
9.         <view class="item-style">{{item.name}}</view>  
10. </block>  
11. </scroll-view>  

3.index.wxss

[css]  view plain  copy

 

1. /**index.wxss**/  
2. .item-style{  
3.   padding: 30rpx;  
4.   font-size: 40rpx;  
5.   text-align: center;  
6.   border-top: 2rpx solid #eee;  
7. }  
8. .refresh-block {  
9.   padding: 15px;  
10.   text-align: center  
11. }  
12. .refresh-block image {  
13.   width: 30px;  
14.   height: 30px;  
15. }  

demo下载地址

http://blog.csdn.NET/qq_31383345