最近做小程序分页,可以有两种处理方式,一种是滚动到底部显示下一页,另一种是滚动到底部,往列表里加一页数据,我用的是第二种,效果比第一种好多了
wxml:列表底部添加文字提示:
<view wx:if="{{goodsList.length > 0}}" class="loading"> {{loadingTxt}}</view>
wxss:
.loading{
text-align: center;
font-size: 12px;
margin: 10px 0;
js 参数定义:
Page({
data: {
keyword: '',
searchStatus: false,
goodsList: [],
page: 1,
size: 20,
id: 0,
loadingTxt: '',
noMoreData: false,
},
数据请求:
getGoodsList: function (paged = false) {
let that = this;
util.request(api.GoodsList, { id: that.data.selectedId, page: that.data.page, size: that.data.size }, 'POST').then(function (res) {
if (res.errno === 0) {
let goods = [];
if (!paged) {
goods = res.data;
}
else{
//当滚动到页面底部时,往列表里添加数据,其它情况(关键字查询,页签切换等)只显示一页数据
goods = that.data.goodsList.concat(res.data);//concat:复制整个数组到前面的数组
}
that.setData({
loadingTip: '',
noMoreData: false,
goodsList: goods,
});
if (res.data.length < that.data.size) {
that.setData({
loadingTxt: '没有更多内容',
noMoreData: true,
});
}
}
});
},
js:
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.data.page = 1
this.getGoodsList();
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
if (!this.data.noMoreData) {
this.data.page = this.data.page + 1;
this.getGoodsList(true);
};
},