小程式頁面內容觸底分頁載入
阿新 • • 發佈:2018-12-19
呼叫介面,獲取商品資訊
<view class='btm'>
<view class='btm-tit'>福利中心</view>
<view class='welfare-list'>
<view class="no-data" wx:if="{{goodList.length<=0}}">
<image src="/images/zw_cnntent.png" mode="aspectFit"></image>
<text>暫無相關內容哦~</text>
</view>
<block wx:for="{{goodList}}" wx:key="this3">
<view class='welfare-detail'>
<view class='good-img'>
<image src="{{item.meg_cover}}"></image>
</view>
<view class='good-describe'>
<view class ='good-tit'>{{item.meg_name}}</view>
<view class='good-content'>{{item.meg_brief}}</view>
<view class='toExchange'>
<text class='needSum'>{{item.meg_score}}福利</text>
<view class='exchange-btn' bindtap='getWelfare' data-index ='{{index}}' data-id='{{item.meg_id}}' data-type='{{item.meg_type}}'>兌換</view>
</view>
</view>
</view>
</block>
<view class="nomore-tip" style="margin-top:-16rpx;" wx:if="{{noMoretip&&goodList.length>0}}">沒有更多資料啦~</view>
</view>
</view>
邏輯、
page({
data:{
goodList:[], //商品列表
page:0, //商品頁碼
noMoretip: false, //false為有更多資料,true為資料載入完畢
},
onLoad: function () {
this.getGoodList(); //請求列表
},
getGoodList:function(){
wx.showLoading({
title: '載入中',
})
var page=this.data.page; //獲取頁碼
var that=this;
// 發起請求,獲取列表列表
wx.request({
url: app.globalData.requestUrl,
data: {
map:xx,
page:page
},
success: function (e) {
if(e.data.ec==200){
var allArr=[];
var initArr = that.data.goodList ? that.data.goodList : []; //獲取已載入的商品
var newArr = e.data.data.goods; //獲取新載入的商品
var lastPageLength = newArr.length; //新獲取的商品數量
if(page<=0){ //如果是第一頁
allArr = e.data.data.goods;
}else{
allArr = initArr.concat(newArr); //如果不是第一頁,連線已載入與新載入商品
}
if (lastPageLength < 10) { //如果新載入的一頁課程數量小於10,則沒有下一頁
that.setData({
noMoretip: true,
});
}
that.setData({
goodList: allArr,
})
}else{
wx.showToast({
title: res.data.em, //錯誤資訊
icon:'none',
duration:'2000'
})
}
},
fail:function(){
wx.showToast({
title: '網路錯誤',
icon:'none'
})
},
complete: function () {
wx.hideLoading();
}
});
},
/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function () {
var page = this.data.page; //獲取現在頁碼
if (!this.data.noMoretip){
page++
this.setData({ //頁碼加一,呼叫函式,獲取下一頁內容
page:page
})
this.getGoodList();
}
},
//下拉重新整理,要將商品列表,頁碼都改為初始值,否則會出現重新整理之後商品的錯亂
onPullDownRefresh: function () {
this.setData({
page: 0,
noMoretip: false, //無更多
goodList: [], //商品列表
})
this.getGoodList();
},
})