小程式分頁，滾動條滾到底部時往列表裡新增資料
最近做小程式分頁，可以有兩種處理方式，一種是滾動到底部顯示下一頁，另一種是滾動到底部，往列表里加一頁資料，我用的是第二種，效果比第一種好多了
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);
};
},