微信小程序在setData時(shí)會(huì)有一個(gè)傳輸上限甥捺，如果按照常規(guī)加載，每次數(shù)據(jù)來(lái)了都concat，會(huì)導(dǎo)致傳輸?shù)臄?shù)據(jù)越來(lái)越大。所以我們這次加載采用分頁(yè)加載的方式纸厉，頁(yè)面中的列表數(shù)據(jù)使用二維數(shù)組。
作為對(duì)比田盈，我們每項(xiàng)的數(shù)據(jù)為一個(gè){}
之前的數(shù)據(jù)格式是 --> listData: [{},{},{}, ....]
現(xiàn)在分頁(yè)之后的二維數(shù)據(jù) --> listData: [[{},{},{},{}],[{},{},{},{}]....]
這樣的話救赐，我們每次setData時(shí)只需要set當(dāng)前那頁(yè)的數(shù)據(jù)即可。
代碼 ??：頁(yè)面中使用scroll-view的話切油，我個(gè)人的習(xí)慣會(huì)先給容器一個(gè)固定高度蝙斜，在json文件中將disabledScroll設(shè)置為true（因?yàn)槭褂昧俗远x的navigationBar，阻止頁(yè)面的滑動(dòng)會(huì)避免滑動(dòng)頁(yè)面帶著navBar一起走）澎胡。我這里設(shè)置的容器高度與頁(yè)面一樣孕荠，為100%。
wxml：
<view class="page-container" style="{{pageHeight}};{{pageTop}}">
<scroll-view scroll-y style="width: 100%; height: 100%;" bindscrolltolower="toBottom">
<view class="list-container">
<block wx:for="{{listData}}" wx:for-item="list" wx:key="index">
<block wx:for="{{list}}" wx:key="id">
<view class="list-card" style="{{cardWidth}};{{cardMargin}}">
<image src="{{item.coverUrl}}" mode="widthFix" class="image" />
<view class="list-card_title">{{item.title}}</view>
</view>
</block>
</block>
</view>
</scroll-view>
</view>
wxss:
.list-container {
display: flex;
flex-wrap: wrap;
}
.list-card {
width: 45%;
margin-left: 20px;
border: 1px solid #000;
}
.image {
display: block;
width: 100%;
}
js:
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
listData: [],
pagination: {
pageNumber: 1,
pageSize: 7
}
},
setPageHeight() {
// 這個(gè)方法作用是設(shè)置容器的樣式攻谁，我用到utils里的方法稚伍，懶得粘貼了??請(qǐng)自行調(diào)試
this.setData({
pageHeight,
pageTop: `margin-top: ${navHeight}px;`
})
},
async getList() {
// 獲取數(shù)據(jù)的方法
const {workList} = await getWorkList(this.data.pagination);
this.setData({
[`listData[${this.data.pagination.pageNumber - 1}]`]: workList
})
// 一下代碼項(xiàng)目不用，只是為了展示數(shù)據(jù)
const currentPageNumber = this.data.pagination.pageNumber;
console.log(`單次傳輸?shù)臄?shù)據(jù),第${currentPageNumber}頁(yè) ---- `,workList);
console.log(`頁(yè)面中渲染的數(shù)據(jù),第${currentPageNumber}頁(yè) ---- `,this.data.listData);
},
toBottom() {
this.setData({
['pagination.pageNumber']: this.data.pagination.pageNumber + 1
})
this.getList();
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad(options) {
this.setPageHeight()
this.getList()
},
這樣一個(gè)分頁(yè)的列表就做好啦～我們可以看一下每次傳輸?shù)臄?shù)據(jù)以及頁(yè)面中渲染的數(shù)據(jù)格式 ??
tada~~~~一個(gè)可以在微信小程序中使用的分頁(yè)加載列表就做好啦??
