查看文檔，在用page()函數(shù)注冊頁面的時候有這樣的兩個對象參數(shù)用戶判斷用戶在最頂部下拉和到達最底部，

image

在小程序里，用戶頂部下拉是默認(rèn)禁止的，我們需要把他設(shè)置為啟用，在app.json中的設(shè)置對所有頁面有效，在單獨頁面設(shè)置則對當(dāng)前頁面有效；

看一下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

有同學(xué)說設(shè)置完之后可以下拉，但是看不到圖標(biāo)；

在app.json中這樣設(shè)置；

image

這樣下拉之后就可以看到了；

每個頁面生成的時候已經(jīng)默認(rèn)為我們設(shè)置了前面提到的onPullDownRefresh函數(shù)和onReachBottom函數(shù)

直接上代碼:

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. // 顯示頂部刷新圖標(biāo)
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. // 設(shè)置數(shù)組元素
17. that.setData({
18. moment: that.data.moment
19. });
20. console.log(that.data.moment);
21. // 隱藏導(dǎo)航欄加載框
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. • 頁面上拉觸底事件的處理函數(shù)

3. */

4. onReachBottom: function () {

5. var that = this;

6. // 顯示加載圖標(biāo)

7. wx.showLoading({

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

9. })

10. // 頁數(shù)+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. // 回調(diào)函數(shù)

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. // 設(shè)置數(shù)據(jù)

26. that.setData({

27. moment: that.data.moment

28. })

29. // 隱藏加載框

30. wx.hideLoading();

31. }

32. })

33. },

完成。