在上一篇文章中，我们知道了使用 scroll-view 可以实现上拉加载更多，但是由于 scroll-view 的限制，它无法实现下拉加载更多，这篇文章我们使用 view 组件来实现 上拉和下拉加载更多。
下拉加载更多：
1、在响应的 xxx.json 配置文件依次配置如下配置
>> enablePullDownRefresh:true 表示开启下拉刷新
>> 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 文件的编写
<view class='view-container'>
<block wx:for='{{articles}}' wx:key='{{item.id}}'>
<view class='articles-container'>
<view class='info'>
<image class='avatar' src='{{item.avatar}}'></image>{{item.nickname}}
<text class='created-at'>{{item.created_at}}</text>
<text class='category'>{{item.category}}</text>
</view>
</view>
</block>
<view class='data-loading' hidden='{{hidden}}'>
数据加载中...
</view>
</view>2、样式编写 loadMore.wxss 文件的编写
.view-container {
background-color: #fff;
}
.data-loading {
height: 100rpx;
line-height: 100rpx;
background-color: #eee;
text-align: center;
font-size: 14px;
}
.articles-container {
border-bottom: 1px solid #eee;
margin: 30rpx 10rpx;
background-color: #eee;
}
.articles-container .info {
font-size: 12px;
margin: 20rpx 0rpx;
height: 100%;
display: inline-block;
}
.articles-container .info .avatar {
width: 60rpx;
height: 60rpx;
margin-right: 10rpx;
border-radius: 60rpx;
display: inline-block;
vertical-align: middle;
}
.articles-container .info .created-at {
margin: 0px 20rpx;
display: inline-block;
vertical-align: middle;
}
.articles-container .info .category {
color: #3399ea;
display: inline-block;
vertical-align: middle;
}3、js 控制 loadMore.js 文件的编写
Page({
data: {
/**
* 需要访问的url
*/
urls: [
'https://www.csdn.net/api/articles?type=more&category=home&shown_offset=0',
'https://www.csdn.net/api/articles?type=new&category=arch',
'https://www.csdn.net/api/articles?type=new&category=ai',
'https://www.csdn.net/api/articles?type=new&category=newarticles'
],
/**
* 当前访问的url索引
*/
currentUrlIndex: 0,
/**
* 获取到的文章
*/
articles: [],
/**
* 控制上拉到底部时是否出现 "数据加载中..."
*/
hidden: true,
/**
* 数据是否正在加载中，避免数据多次加载
*/
loadingData: false
},
onLoad: function(options) {
this.loadData(false);
},
/**
* 加载数据
*/
loadData: function(tail, callback) {
var that = this,
urlIndex = that.data.currentUrlIndex;
wx.request({
url: that.data.urls[urlIndex],
success: function(r) {
var oldArticles = that.data.articles,
newArticles = tail ? oldArticles.concat(r.data.articles) : r.data.articles;
that.setData({
articles: newArticles,
currentUrlIndex: (urlIndex + 1) >= that.data.urls.length ? 0 : urlIndex + 1
});
if (callback) {
callback();
}
},
error: function(r) {
console.info('error', r);
},
complete: function() {}
});
},
/**
* 监听用户下拉动作
*/
onPullDownRefresh: function() {
console.info('onPullDownRefresh');
var loadingData = this.data.loadingData,
that = this;
if (loadingData) {
return;
}
// 显示导航条加载动画
wx.showNavigationBarLoading();
// 显示 loading 提示框,在 ios 系统下，会导致顶部的加载的三个点看不见
// wx.showLoading({
// title: '数据加载中...',
// });
setTimeout(function() {
that.loadData(false, () => {
that.setData({
loadingData: false
});
wx.stopPullDownRefresh();
// wx.hideLoading();
wx.hideNavigationBarLoading();
console.info('下拉数据加载完成.');
});
}, 1000);
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
console.info('onReachBottom');
var hidden = this.data.hidden,
loadingData = this.data.loadingData,
that = this;
if (hidden) {
this.setData({
hidden: false
});
console.info(this.data.hidden);
}
if (loadingData) {
return;
}
this.setData({
loadingData: true
});
// 加载数据,模拟耗时操作
wx.showLoading({
title: '数据加载中...',
});
setTimeout(function() {
that.loadData(true, () => {
that.setData({
hidden: true,
loadingData: false
});
wx.hideLoading();
});
console.info('上拉数据加载完成.');
}, 1000);
}
})4、配置文件 loadMore.json 的编写
{
"navigationBarTitleText": "上拉刷新和下拉加载更多",
"enablePullDownRefresh": true,
"onReachBottomDistance": 0,
"backgroundTextStyle": "dark",
"backgroundColor": "#c0d9ff"
}完整代码：
微信小程序实现上拉和下拉加载更多代码：https://gitee.com/huan1993/weixin_mini_program_study/tree/master/pages/view-pull-up-load-more
