4_上拉加載下拉刷新

業務代碼

1. const app = getApp()
2.  
3. Page({
4. data: {
5. words: [],
6. // 上拉加載的flag
7. flagLoadmore: false,
8. // loading界面顯示
9. flagLoading: true,
10. // 下拉刷新的flag
11. flagPull: false,
12. // 沒有更多
13. flagNoMore: false,
14. // 頁碼 【頁碼，總頁碼，須要在網絡請求中獲取，這裏只是做爲測試使用】
15. page: 1,
16. // 總頁碼
17. totalPage: 1,
18.  
19. time: 2000,
20. },
21. onLoad: function () {
22.  
23. },
24. onReady: function () {
25.  
26. setTimeout(() => {
27. this.setData({
28. words: [
29. { message: 'haha' }, { message: 'haha' }, { message: 'haha' }, { message: 'haha' },
30. { message: 'haha' }, { message: 'haha' }, { message: 'haha' }, { message: 'haha' },
31. { message: 'haha' }, { message: 'haha' }, { message: 'haha' }
32. ],
33. flagLoading: false
34. })
35. }, 5000)
36. },
37. // 下拉刷新回調接口
38. onPullDownRefresh: function () {
39.  
40. let flagPull = this.data.flagPull
41.  
42. // 防止爆破下拉【一會兒拉了好屢次】
43. if (flagPull) return
44.  
45. let words = this.data.words
46. let time = this.data.time
47.  
48.  
49. setTimeout(() => {
50. for (let i = 0; i < 11; i++) {
51. words.unshift({ message: 'world' + i })
52. }
53.  
54. this.setData({
55. words: words,
56. flagPull: false
57. })
58. wx.hideNavigationBarLoading() //完成中止加載
59. wx.stopPullDownRefresh() //中止下拉刷新
60. }, time)
61.  
62. this.setData({ flagPull: true })
63. },
64.  
65. onReachBottom: function () {
66. let flag = this.data.flagLoadmore
67. let page = this.data.page
68. let totalPage = this.data.totalPage
69. let time = this.data.time
70.  
71. // 防止重複調用
72. if (flag == true) return
73.  
74. if (page > totalPage) {
75. this.setData({ flagNoMore: true })
76. return
77. }
78.  
79. let words = this.data.words
80.  
81. setTimeout(() => {
82. page++
83. for (let i = 0; i < 11; i++) {
84. words.push({ message: 'world' + i })
85. }
86.  
87. this.setData({
88. words: words,
89. page: page,
90. flagLoadmore: false
91. })
92. }, time)
93.  
94. this.setData({ flagLoadmore: true })
95. },
96.  
97. onItemClick: function (e) {
98. var index = e.currentTarget.dataset.index; //打印能夠看到，此處已獲取到了對應的id
99. console.log(index);
100.  
101.  
102. wx.navigateTo({
103. url: '../toast/toast',
104. })
105. }
106. });

界面UI【聯合weui】

1. weui樣式引入

1. 在github中下載weui的包，解壓後，把weui.wxss引入

2. 佈局樣式

1. <!--index.wxml-->
2. <view class="page">
3.  
4. <!-- 上拉加載的提示 -->
5. <view class="weui-loadmore" wx:if="{{flagLoading}}" style='margin:0 auto; padding:10px'>
6. <view class="weui-loading"></view>
7. </view>
8.  
9. <view>
10. <view wx:for="{{words}}" bindtap="onItemClick" data-index="{{index}}" class="loadmore-list" hover-class='weui-grid_active'>
11. {{index}}: {{item.message}}
12. </view>
13.  
14. <!-- 上拉加載的提示 -->
15. <view class="weui-loadmore" wx:if="{{flagLoadmore}}" style='margin:0 auto; padding:10px'>
16. <view class="weui-loading"></view>
17. <view class="weui-loadmore__tips">正在加載</view>
18. </view>
19.  
20. <view class="weui-loadmore" wx:if="{{flagNoMore}}" style='margin:0 auto; padding:10px'>
21. <view class="weui-loadmore__tips">暫無數據</view>
22. </view>
23.  
24. </view>
25.  
26. </view>

json文件配置

注意