微信小程序实现上拉和下拉加载更多

 在上一篇文章中，我们知道了使用 scroll-view 可以实现上拉加载更多，但是由于 scroll-view 的限制，它无法实现下拉加载更多，这篇文章我们使用 view 组件来实现 上拉和下拉加载更多。

下拉加载更多：

      1、在响应的 xxx.json 配置文件依次配置如下配置

            >> enablePullDownRefresh:true  表示开启下拉刷新

 　　　>>onReachBottomDistance:0  

            >> backgroundTextStyle              下拉 loading 的样式，仅支持 dark/light

            >> backgroundColor                    窗口的背景色

      2、上方后面2个没有设置好，在下拉时，页面顶部会出现一块白色的区域。

      3、在下拉刷新时，不可使用 wx.showLoading 提示（其余的提示我没有测试），否则在 ios 下页面回弹过多，导致看不到顶部的那个提示页面刷新的区域。

      4、页面下拉会触发 onPullDownRefresh 事件

      5、防止 onPullDownRefresh 多次触发，导致多次请求

上拉加载更多：

     1、在对应的 xxx.json 中配置(不是必须的)

           >> onReachBottomDistance          页面上拉触底事件触发时距页面底部距离，单位为px

     2、页面上拉在小于或等于  onReachBottomDistance  的距离时，会触发 onReachBottom 事件

实现效果：

 

代码实现：

1、页面布局 loadMore.wxml 文件的编写

Java代码  

1. <view class='view-container'>  
2.   <block wx:for='{{articles}}' wx:key='{{item.id}}'>  
3.     <view class='articles-container'>  
4.       <view class='info'>  
5.         <image class='avatar' src='{{item.avatar}}'></image>{{item.nickname}}  
6.         <text class='created-at'>{{item.created_at}}</text>  
7.         <text class='category'>{{item.category}}</text>  
8.       </view>  
9.     </view>  
10.   </block>  
11.   <view class='data-loading' hidden='{{hidden}}'>  
12.     数据加载中...  
13.   </view>  
14. </view>  

2、样式编写 loadMore.wxss 文件的编写

Java代码  

1. .view-container {  
2.   #fff;  
3. }  
4.   
5. .data-loading {  
6.   height: 100rpx;  
7.   line-height: 100rpx;  
8.   #eee;  
9.   text-align: center;  
10.   font-size: 14px;  
11. }  
12.   
13. .articles-container {  
14.   border-bottom: 1px solid #eee;  
15.   margin: 30rpx 10rpx;  
16.   #eee;  
17. }  
18.   
19. .articles-container .info {  
20.   font-size: 12px;  
21.   margin: 20rpx 0rpx;  
22.   height: 100%;  
23.   display: inline-block;  
24. }  
25.   
26. .articles-container .info .avatar {  
27.   width: 60rpx;  
28.   height: 60rpx;  
29.   margin-right: 10rpx;  
30.   border-radius: 60rpx;  
31.   display: inline-block;  
32.   vertical-align: middle;  
33. }  
34.   
35. .articles-container .info .created-at {  
36.   margin: 0px 20rpx;  
37.   display: inline-block;  
38.   vertical-align: middle;  
39. }  
40.   
41. .articles-container .info .category {  
42.   color: #3399ea;  
43.   display: inline-block;  
44.   vertical-align: middle;  
45. }  

3、js 控制 loadMore.js 文件的编写

Java代码  

1. Page({  
2.   
3.   data: {  
4.     /** 
5.      * 需要访问的url 
6.      */  
7.     urls: [  
8.       'https://www.csdn.net/api/articles?type=more&category=home&shown_offset=0',  
9.       'https://www.csdn.net/api/articles?type=new&category=arch',  
10.       'https://www.csdn.net/api/articles?type=new&category=ai',  
11.       'https://www.csdn.net/api/articles?type=new&category=newarticles'  
12.     ],  
13.     /** 
14.      * 当前访问的url索引 
15.      */  
16.     currentUrlIndex: 0,  
17.     /** 
18.      * 获取到的文章 
19.      */  
20.     articles: [],  
21.     /** 
22.      * 控制上拉到底部时是否出现 "数据加载中..." 
23.      */  
24.     hidden: true,  
25.     /** 
26.      * 数据是否正在加载中，避免数据多次加载 
27.      */  
28.     loadingData: false  
29.   },  
30.   
31.   onLoad: function(options) {  
32.     this.loadData(false);  
33.   },  
34.   
35.   /** 
36.    * 加载数据 
37.    */  
38.   loadData: function(tail, callback) {  
39.     var that = this,  
40.       urlIndex = that.data.currentUrlIndex;  
41.     wx.request({  
42.       url: that.data.urls[urlIndex],  
43.       success: function(r) {  
44.         var oldArticles = that.data.articles,  
45.           newArticles = tail ? oldArticles.concat(r.data.articles) : r.data.articles;  
46.         that.setData({  
47.           articles: newArticles,  
48.           currentUrlIndex: (urlIndex + 1) >= that.data.urls.length ? 0 : urlIndex + 1  
49.         });  
50.         if (callback) {  
51.           callback();  
52.         }  
53.       },  
54.       error: function(r) {  
55.         console.info('error', r);  
56.       },  
57.       complete: function() {}  
58.     });  
59.   },  
60.   
61.   /** 
62.    * 监听用户下拉动作 
63.    */  
64.   onPullDownRefresh: function() {  
65.     console.info('onPullDownRefresh');  
66.     var loadingData = this.data.loadingData,  
67.       that = this;  
68.     if (loadingData) {  
69.       return;  
70.     }  
71.     // 显示导航条加载动画  
72.     wx.showNavigationBarLoading();  
73.     // 显示 loading 提示框,在 ios 系统下，会导致顶部的加载的三个点看不见  
74.     // wx.showLoading({  
75.     //   title: '数据加载中...',  
76.     // });  
77.     setTimeout(function() {  
78.       that.loadData(false, () => {  
79.         that.setData({  
80.           loadingData: false  
81.         });  
82.         wx.stopPullDownRefresh();  
83.         // wx.hideLoading();  
84.         wx.hideNavigationBarLoading();  
85.         console.info('下拉数据加载完成.');  
86.       });  
87.     }, 1000);  
88.   },  
89.   
90.   /** 
91.    * 页面上拉触底事件的处理函数 
92.    */  
93.   onReachBottom: function() {  
94.     console.info('onReachBottom');  
95.     var hidden = this.data.hidden,  
96.       loadingData = this.data.loadingData,  
97.       that = this;  
98.     if (hidden) {  
99.       this.setData({  
100.         hidden: false  
101.       });  
102.       console.info(this.data.hidden);  
103.     }  
104.     if (loadingData) {  
105.       return;  
106.     }  
107.     this.setData({  
108.       loadingData: true  
109.     });  
110.     // 加载数据,模拟耗时操作  
111.   
112.     wx.showLoading({  
113.       title: '数据加载中...',  
114.     });  
115.   
116.     setTimeout(function() {  
117.       that.loadData(true, () => {  
118.         that.setData({  
119.           hidden: true,  
120.           loadingData: false  
121.         });  
122.         wx.hideLoading();  
123.       });  
124.       console.info('上拉数据加载完成.');  
125.     }, 1000);  
126.   }  
127. })  

4、配置文件 loadMore.json 的编写

Java代码  

1. {  
2.   "navigationBarTitleText": "上拉刷新和下拉加载更多",  
3.   "enablePullDownRefresh": true,  
4.   "onReachBottomDistance": 0,  
5.   "backgroundTextStyle": "dark",  
6.   "backgroundColor": "#c0d9ff"  
7. }  

完整代码：

微信小程序实现上拉和下拉加载更多代码：https://gitee.com/huan1993/weixin_mini_program_study/tree/master/pages/view-pull-up-load-more