小程序实现下拉刷新和上拉加载更多有两种方式：
1.通过小程序自带的页面相关事件处理函数 onPullDownRefresh 和 onReachBottom 来实现；
2.通过 scroll-view 组件的 bindscrolltolower 和 bindscrolltoupper 实现。
个人比较推荐使用第一种，因为scroll-view组件的两个事件的触发会出现些许小问题，不是不能触发就是多次触发，要做特殊处理，不省心。
onPullDownRefresh + onReachBottom
<block wx:for='{{tradeList}}'>
<!-- 列表内容... -->
</block>
<!-- 底部加载显示 -->
<import src='/template/footer/footer.wxml' />
<template is='hasMore' data='{{...foot}}'></template>
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.setData({
pageIndex: 1,
});
this.pullDownRefreshData(this);
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.setData({
pageIndex: this.data.pageIndex + 1,
});
this.pullUpRefreshData(this);
},
/**
* 下拉刷新
*/
pullDownRefreshData: function (context) {
let params = {
pageIndex: 1,
};
app.YoniClient.request(app.Func.GET_FAVORITE_LIST, params, function (res) {
//console.log("下拉刷新: " + JSON.stringify(res));
if (res.code == 0) {
context.setData({
tradeList: res.result.goodsList,
foot: { loading: res.result.goodsList.length == 10, nomore: false },
});
}
wx.stopPullDownRefresh();
});
},
/**
* 上拉加载
*/
pullUpRefreshData: function (context) {
let params = {
pageIndex: context.data.pageIndex,
};
app.YoniClient.request(app.Func.GET_FAVORITE_LIST, params, function (res) {
//console.log("上拉加载: " + JSON.stringify(res));
if (res.code == 0) {
let tempList = context.data.tradeList;
let collectList= tempList.concat(res.result.goodsList);
context.setData({
tradeList: collectList,
foot: { loading: collectList.length == 10, nomore: collectList.length != 10 },
});
}
}, true);
},
scroll-view
<scroll-view class='scroll-view_V' scroll-y bindscrolltolower='pulluprefresh' bindscrolltoupper='pulldownrefresh'>
<block wx:for='{{orders.detail}}' wx:for-item='items' wx:for-index='indexx'>
<!-- 列表内容... -->
</block>
<!-- 底部加载显示 -->
<import src='../../template/footer/footer.wxml' />
<template is='hasMore' data='{{...foot}}'></template>
</scroll-view>
/**
* 下拉刷新
*/
pulldownrefresh: function () {
if (!this.data.loadMore) {
this.setData({
refresh: true,
foot: { loading: true, nomore: false },
})
wx.startPullDownRefresh({
});
this.loadOrderList(this.data.swipe_config.current);
}
},
/**
* 上拉加载
*/
pulluprefresh: function () {
if (!this.data.loadMore) {
console.log('----pulluprefresh----');
this.setData({
loadMore: true,
//foot: { loading: true, nomore: false },
})
this.loadOrderList(this.data.swipe_config.current, true);
}
},
实现效果：
refresh.gif
拍的不是很好，实际效果是比较棒的。
其实这两种也是可以搭配着使用，看项目需求了！
