一、虚拟列表
可以以一屏为一个单位,而不是以一个item为一个单位,一屏是指一个列表所占的屏幕,首尾两屏的元素也一起加起来算是总的需要渲染元素。
实现方案分为下面两步:
1、将渲染列表的数组list改成二维数组。
2、只渲染当然可视区域的那一屏以及它前后一屏的元素。其他用空白div占位
要做到第二步,还需要分成三小步
- 需要知道每一屏的高度,这样才能给这个占位的空白div元素设置高度。
- 渲染下一屏last的数据,除了保留last,以及last-1那一屏的渲染,其他节点应该为空。
- 如果是获取非最后一屏幕的,通过监听onscrollTop 获取到scrollTop的值,算取当前应该渲染哪一屏,在重新组装数据setData
🌼初始化
<view>
<view id="wrap_{{index}}" wx:for="{{ allList }}" wx:key="index">
<view wx:if="{{ item.length > 0 }}">
<view wx:for="{{ item }}" wx:key="ind" wx:for-index="ind" wx:for-item="itm" style="border: 1px solid;height: 200px;display: flex;align-items: center;justify-content: center;box-sizing: border-box;">
{{ itm.id }}个元素,为第 {{ index }} 屏数据
</view>
</view>
<!-- 空白div占位 -->
<view wx:else style="height: {{ item.height}}px"></view>
</view>
</view>
onLoad(options) {
// 一个列表为一屏
this.wholePageIndex = 0 // 整屏索引
this.wholeAllList = [] // 储存所有屏数组
this.currentPageIndex = 0 // 当前可视位置的索引
this.currentRenderIndex = 0; // 当前渲染的索引
this.allPageHeightList = []; // 储存每一屏的高度
this.windowHeight = wx.getSystemInfoSync().windowHeight // 可视区域高度
// 当前页数组储存
this.wholeAllList[this.wholePageIndex] = orderData.data.content;
// 当前页赋值
this.setData({ ['allList['+ this.wholePageIndex + ']' ]: orderData.data.content }, () => {
// 获取每屏高度并储存
this.getWholeInfo()
})
},
⛵️获取每屏高度并储存
getWholeInfo() {
const that = this
const wholePageIndex = that.wholePageIndex
// 此api不能用that
this.query = this.createSelectorQuery()
this.query.select(`#wrap_${wholePageIndex}`).boundingClientRect()
this.query.exec(function (res) {
// 储存每一屏的高度
that.allPageHeightList[wholePageIndex] = res[0] && res[0].height;
console.log("this.allPageHeightList", that.allPageHeightList);
})
},
🌈滚动的时候需要实时去计算当前应该在哪一屏幕
// 加上节流
onPageScroll: throttle(function (e) {
const that = this
const { scrollTop } = e
const wholePageIndex = that.wholePageIndex
// 滚动的时候需要实时去计算当前应该在哪一屏幕
// 循环获取所有屏总高度
let allPageHeight = 0
for (let i = 0; i < that.allPageHeightList.length; i++) {
allPageHeight = allPageHeight + that.allPageHeightList[i]
// 判断当前在哪个屏,并跳出,一定要用break
if (allPageHeight > scrollTop + that.windowHeight) {
// 获取当前可视位置索引
that.currentPageIndex = i
break;
}
}
const currentRenderIndex = that.currentRenderIndex
// 当时可视位置索引 不等于 当前渲染的索引 时
// 也就是页面上划时,需要渲染加载之前的数组
if(that.currentPageIndex !== currentRenderIndex) {
// 给不渲染的元素占位
// 设置初始长度 wholePageIndex + 1 长度为 1,将一个固定值替换数组内的元素。
let blankDivList = new Array(wholePageIndex+1).fill(0);
blankDivList.forEach((item, index) => {
if(that.currentPageIndex - 1 <= index && index <= that.currentPageIndex + 1) {
blankDivList[index] = that.wholeAllList[index];
} else {
blankDivList[index] = { height: that.allPageHeightList[index]};
}
})
that.currentRenderIndex = that.currentPageIndex;
// 再重新赋值
that.setData({ allList: blankDivList })
}
}, 500),
😶触底加载
// 触底加载
getReachBottomData() {
this.wholePageIndex = this.wholePageIndex + 1 // 整屏索引 + 1
this.currentRenderIndex = this.wholePageIndex // 当前渲染的索引 + 1
// 储存下一页的数据
this.wholeAllList[this.wholePageIndex] = orderData.data.content
let dataSet = {}
// 设置初始长度 wholePageIndex + 1 长度为 1,将一个固定值替换数组内的元素。
let blankDivList = new Array(this.wholePageIndex + 1).fill(0)
// 二维数组内只储存两个数组,大于两个,离 当前所在可视区域的数组,最远的两个数据
// 赋值为其所占高度,用div空白占位,实际上真正渲染的数据只有两组
// 所以这里要判断大于2, 3大于2,所以0到3共4条数组,再代入以上规则
if (this.wholePageIndex > 2) {
blankDivList.forEach((item, index) => {
// 最远的数组用其高度占位
if(index < blankDivList.length - 2) {
blankDivList[index] = { height: this.allPageHeightList[index]};
} else {
blankDivList[index] = this.wholeAllList[index];
}
})
// 记得赋值
dataSet.allList = blankDivList;
} else {
dataSet['allList['+ this.wholePageIndex + ']'] = orderData.data.content
}
// 这里相当于 this.setData({ list[1]: orderData.data.content })
this.setData(dataSet, () => {
this.getWholeInfo()
})
},
⛳️具体解释可以参考这篇文章