微信小程序学习点滴《十六》：下拉刷新 上拉加载

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

上gif:

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

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

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

上代码:

1.index.js

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: 'https://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: 'https://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);