微信小程序实现上拉加载下拉刷新
使用小程序默认提供方法。
(1). 在xxx.json 中开启下拉刷新，需要设置backgroundColor，或者是backgroundTextStyle ，因为加载的动画可能会是白色背景，会看不清。
{
"usingComponents": {
"annicate": "/components/annicate/index"
},
"navigationBarTitleText": "通告列表",
"enablePullDownRefresh": true,
"backgroundColor": "#ffffff",
"backgroundTextStyle": "dark"
}
(2). 在 js 中处理逻辑
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
// 标题栏显示刷新图标，转圈圈
wx.showNavigationBarLoading()
// 请求最新数据
this.initDate(true);
setTimeout(() => {
// 标题栏隐藏刷新转圈圈图标
wx.hideNavigationBarLoading()
}, );
}, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
setTimeout(() => {
this.initDate();
}, );
},
data 中
loading: false, // 是否正在加载中
loaded: false, // 是否加载完全部数据
/**
* 初始化数据
*/
initDate: function (isPage) {
var that = this;
// 加载第一页
if (isPage === true){
that.setData({
notice_list: [],
page:
});
} else {
var num = that.data.page + ;
if (num <= that.data.totalPage) {
that.setData({
page: num
});
} else if (num > that.data.totalPage) {
that.setData({
loaded: true
});
}
} if (that.data.loading) return;
if (that.data.loaded) return; var json = {
keywords: that.data.keywords
};
wx.showLoading({
title: '加载中',
}) that.setData({ loading: true, loadTitle: '' });
noticeList(json).then(res => {
let notice_list = app.SplitArray(res.data.notice_list.list, that.data.notice_list);
wx.hideLoading()
that.setData({
notice_list: notice_list,
loading: false,
loadTitle: that.data.page == res.data.notice_list.total_page ? '已全部加载' : '加载更多',
totalPage: res.data.notice_list.total_page
});
}).catch(err => {
that.setData({ loading: false, loadTitle: '加载更多' });
});;
},
页面中
<view class='annicate_wrap'>
<annicate bindtap='detailFun' wx:for="{{notice_list}}" wx:key="index" jsonDate="{{item}}"></annicate>
<view class='loadingicon acea-row row-center-wrapper' wx:if='{{notice_list.length > 0}}'>
<text class='loading iconfont icon-jiazai' hidden='{{loading==false}}'></text>{{loadTitle}}
</view>
</view>
app.SplitArray是小程序连接两个数组的方法
app.js 中
/*
* 合并数组
* @param array list 请求返回数据
* @param array sp 原始数组
* @return array
*/
SplitArray: function(list, sp) {
return util.SplitArray(list, sp)
}
untils 中
/*
* 合并数组
*/
const SplitArray = function (list, sp) {
if (typeof list != 'object') return [];
if (sp === undefined) sp = [];
for (var i = ; i < list.length; i++) {
sp.push(list[i]);
}
return sp;
}