我写个小作文先。。
面试时候两位面试官都问虚拟列表的问题。。我心说能不能面上再说我先搞搞。。那段时间在忙跳槽，没怎么弄。。。跳槽完毕没活儿干就开始弄。。。。。今天是虚拟列表的第三天。。从一开始的百度，到后面的——我理解但我不会，再到现在的——哼我就弄个前端假分页不得了～后面发现微信小程序会限制页面的DOM数量，具体多少我不知道但是是有这么回事儿。。以下是相关文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#_6-WXML%E8%8A%82%E7%82%B9%E6%95%B0
但我试着貌似是没有问题，也可能因为没有到太后面的地方。。而且按照其他的思路，循环当前数据屏，没到的地方占位。。。它照样节点数量多啊
代码们
html：用了scroll-view中的bindscrolltolower或者与页面同高的容器装列表都可以，感觉scroll-view在触及底部时更好用 ⬇️
<!-- <view class="container" id="container">
<scroll-view class="scroll-container" scroll-y="{{true}}" enhanced show-scrollbar bindscrolltolower="scrollToLower">
<view wx:for="{{listData}}" wx:key="index" class="list-item" style="height: {{itemHeight}}px;">{{item}}</view>
</scroll-view>
</view> -->
<view class="container" id="container">
<view wx:for="{{listData}}" wx:key="index" class="list-item" style="height: {{itemHeight}}px;line-height: {{itemHeight}}px;">{{item}}</view>
</view>
css样式很简约，需要注意的点是，容器需要设置固定高度 ⬇️
.container {
height: 100%;
}
.scroll-container {
height: 100%;
}
.list-item {
text-align: center;
}
JS部分 ⬇️
Page({
data: {
//屏幕区域展示数据
containerHeight: 0,
listData: [],
itemHeight: 40,
showCount: 0,
//获取到的全部数据
initData: [],
listParams: {
pageNum: 1,
pageSize: 0
}
},
// 获取容器高度 ---- 设置pageSize
counting() {
return new Promise(resolve => {
let query = wx.createSelectorQuery();
query.select('#container').boundingClientRect(rect => {
let containerHeight = rect.height;
let showCount = Math.floor(containerHeight / this.data.itemHeight);
this.setData({
[`listParams.pageSize`]: showCount + 4,
[`listParams.pageNum`]: 0
})
resolve();
}).exec();
})
},
//获取数据
getList() {
//虚拟数据。。。。哈哈哈哈哈哈哈两万条呢
let initData = [];
for (let i = 0; i < 20000; i++) {
initData.push(i);
}
//最多几页
let maxPageNum = Math.ceil(initData.length / this.data.listParams.pageSize)
this.setData({
initData,
maxPageNum
})
this.renderPage(0);
},
scrollToLower() {
if (this.data.maxPageNum - 1 <= this.data.listParams.pageNum) {
wx.showToast({
title: "到底啦～～～～"
})
return;
}
this.setData({
[`listParams.pageNum`]: this.data.listParams.pageNum + 1
})
this.renderPage(this.data.listParams.pageNum);
},
renderPage(currentPage) {
let startIndex = currentPage * this.data.listParams.pageSize;
let initData = JSON.parse(JSON.stringify(this.data.initData));
// 用JSON方法倒了一遍因为splice会改变原数组。。
let currentData = initData.splice(startIndex, this.data.listParams.pageSize);
currentData.map((item, index) => {
let currenIndex = index + currentPage * this.data.listParams.pageSize;
this.setData({
[`listData[${currenIndex}]`]: item
})
})
},
onLoad(options) {
this.counting().then(() => {
this.getList()
});
},
onReachBottom() {
this.scrollToLower();
}
})
~tada~~~啥也不是。。下次真的虚拟完再见
