小程序下拉刷新/上拉加载更多

查看文档，在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉和到达最底部，

image

在小程序里，用户顶部下拉是默认禁止的，我们需要把他设置为启用，在app.json中的设置对所有页面有效，在单独页面设置则对当前页面有效；

看一下json文件

[javascript] view plaincopy

<embed id="ZeroClipboardMovie_1" src="https://csdnimg.cn/public/highlighter/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="16" height="16" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=16&height=16" wmode="transparent" style="box-sizing: border-box; outline: 0px; word-break: break-all;">

<embed id="ZeroClipboardMovie_4" src="https://csdnimg.cn/public/highlighter/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="16" height="16" name="ZeroClipboardMovie_4" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=4&width=16&height=16" wmode="transparent" style="box-sizing: border-box; outline: 0px; word-break: break-all;">

1. "enablePullDownRefresh": true,

注意这里的true是布尔型而不是字符；

image

有同学说设置完之后可以下拉，但是看不到图标；

在app.json中这样设置；

image

这样下拉之后就可以看到了；

每个页面生成的时候已经默认为我们设置了前面提到的onPullDownRefresh函数和onReachBottom函数

直接上代码:

page为全局变量，用在在后面的加载请求，这里要跟后端大哥讨论好请求；

[javascript] view plaincopy

<embed id="ZeroClipboardMovie_2" src="https://csdnimg.cn/public/highlighter/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="16" height="16" name="ZeroClipboardMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&width=16&height=16" wmode="transparent" style="box-sizing: border-box; outline: 0px; word-break: break-all;">

<embed id="ZeroClipboardMovie_5" src="https://csdnimg.cn/public/highlighter/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="16" height="16" name="ZeroClipboardMovie_5" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=5&width=16&height=16" wmode="transparent" style="box-sizing: border-box; outline: 0px; word-break: break-all;">

1. // 下拉刷新
2. onPullDownRefresh: function () {
3. // 显示顶部刷新图标
4. wx.showNavigationBarLoading();
5. var that = this;
6. wx.request({
7. url: 'https://xxx/?page=0',
8. method: "GET",
9. header: {
10. 'content-type': 'application/text'
11. },
12. success: function (res) {
13. that.setData({
14. moment: res.data.data
15. });
16. // 设置数组元素
17. that.setData({
18. moment: that.data.moment
19. });
20. console.log(that.data.moment);
21. // 隐藏导航栏加载框
22. wx.hideNavigationBarLoading();
23. // 停止下拉动作
24. wx.stopPullDownRefresh();
25. }
26. })
27. },

上拉加载更多：

[javascript] view plaincopy

<embed id="ZeroClipboardMovie_3" src="https://csdnimg.cn/public/highlighter/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="16" height="16" name="ZeroClipboardMovie_3" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=3&width=16&height=16" wmode="transparent" style="box-sizing: border-box; outline: 0px; word-break: break-all;">

<embed id="ZeroClipboardMovie_6" src="https://csdnimg.cn/public/highlighter/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="16" height="16" name="ZeroClipboardMovie_6" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=6&width=16&height=16" wmode="transparent" style="box-sizing: border-box; outline: 0px; word-break: break-all;">

1. /**

2. • 页面上拉触底事件的处理函数

3. */

4. onReachBottom: function () {

5. var that = this;

6. // 显示加载图标

7. wx.showLoading({

8. title: '玩命加载中',

9. })

10. // 页数+1

11. page = page + 1;

12. wx.request({

13. url: 'https://xxx/?page=' + page,

14. method: "GET",

15. // 请求头部

16. header: {

17. 'content-type': 'application/text'

18. },

19. success: function (res) {

20. // 回调函数

21. var moment_list = that.data.moment;

22. for (var i = 0; i < res.data.data.length; i++) {

23. moment_list.push(res.data.data[i]);

24. }

25. // 设置数据

26. that.setData({

27. moment: that.data.moment

28. })

29. // 隐藏加载框

30. wx.hideLoading();

31. }

32. })

33. },

完成。