一回怜、效果
已加載全部.png
二店量、步驟
1. wxml中
<view class="loading" hidden="{{!searchLoading}}">正在載入更多...</view>
<view class="loading" hidden="{{!searchLoadingComplete}}">已加載全部</view>
2. wxss中
.loading{
padding: 10rpx;
font-size: 26rpx;
color:#666;
text-align: center;
}
3. json文件中芜果，開啟下拉刷新
{
"usingComponents": {},
"navigationBarTitleText": "日常管理",
"enablePullDownRefresh": true
}
4. js中
①添加這幾個變量
data: {
pageNo: 1, // 設(shè)置加載的第幾次，默認(rèn)是第一次
pageSize: 10, //返回?cái)?shù)據(jù)的個數(shù)
searchLoading: false, //"上拉加載"的變量融师，默認(rèn)false右钾，隱藏
searchLoadingComplete: false //“沒有數(shù)據(jù)”的變量，默認(rèn)false旱爆，隱藏
},
②加載數(shù)據(jù)方式用下拉的方式
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
wx.startPullDownRefresh();
},
③相關(guān)函數(shù)處理
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function() {
this.setData({
pageNo: 1,
storelist:[],
searchLoading: true, //"上拉加載"的變量舀射，默認(rèn)false，隱藏
searchLoadingComplete: false //“沒有數(shù)據(jù)”的變量怀伦，默認(rèn)false脆烟，隱藏
})
this.getShopList();
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function() {
if (!this.data.searchLoadingComplete){
var currentPageNo = this.data.pageNo;
this.setData({
pageNo: currentPageNo + 1,
})
this.getShopList();
}
},
④請求參數(shù)中加入
'pageNo': _this.data.pageNo,
'pageSize': _this.data.pageSize,
⑤請求成功處理回調(diào)
function(result) {
if (_this.data.pageNo==1){
wx.stopPullDownRefresh();//下拉刷新收起來
}
console.log('success', result.retailList);
if (result.retailList.length<_this.data.pageSize){//小于個數(shù)，表示沒有更多了
_this.setData({
searchLoading: false,
searchLoadingComplete :true
})
}
_this.setData({
storelist: _this.data.storelist.concat(result.retailList)
})
}
