目录
- 前言
- 一. 先通俗易懂的理解虚拟列表
- 二. 实操步骤
- 1. 使用taro现成的[长列表渲染](https://docs.taro.zone/docs/virtual-list)
- 2. taro走不通，试试vue插件
- 3. 使用taro提供的方法和劳动人民的双手自己造
- 首先需要熟悉下面几个方法（原生小程序支持）：
- 思路
- 主要代码片段（加了注释，vue2的写法）
前言
项目突降需求，开发微信小程序，经过几轮对比，选择了Taro3.x + Vue2开发，其中遇到了一个虚拟列表的坑点，特此记录下踩坑和跳坑的过程
一. 先通俗易懂的理解虚拟列表
其实这个已经被用烂了的前端优化手段，没啥可讲的，但我不一样，我就是要再复习一遍。（不想看的可以跳过到第二个实操步骤）
一般需要虚拟列表介入的情况就是：当前页面已经 或 可预见会加载很大量级的数据。
就像世道无情但人间有情一样，列表无限但可视有限，虚拟列表揉圆搓扁说白了，就是利用了可视化渲染手段，即在你看不见的地方还是看不见，在你看得见的地方才给你看见。
总的思想就是，越少渲染dom数，性能越高。
即只在可视区高度渲染dom，监听文档滑动高度，当页面元素超出可视区则不进行渲染。
二. 实操步骤
1. 使用taro现成的长列表渲染
vue3 的筒子们暂时别考虑taro长列表了，据笔者此时写文的时间，vue3 长列表还没有兼容支持，直接过
具体使用可以参考上面的链接，至于为什么我们没有采用框架成熟的优化方式，可以看下面这动图：
滑动到底7条位置，就开始闪瞎鄙人狗眼，So，方案破产，攀不上官网亲儿子的顺风车了。
2. taro走不通，试试vue插件
我觉得可能我在想桃子，应该能预见，失败了。
对，小程序没办法转义我们的div之类标签，会报warning，如果要处理这个问题，需要装插件之类的处理，但是少量转还行，类似插件这种就没必要了
3. 使用taro提供的方法和劳动人民的双手自己造
首先需要熟悉下面几个方法（原生小程序支持）：
createIntersectionObserver 创建并返回一个 IntersectionObserver 对象实例
IntersectionObserver.relativeToViewport 指定页面显示区域作为参照区域之一
createSelectorQuery 返回一个 SelectorQuery 对象实例
NodesRef.boundingClientRect 添加节点的布局位置的查询请求
思路
- 先获取可视区高度，笔者项目需求是获取屏幕safe area高度（通过wx.getSystemInfo方法）
- 假设每批数据请求10条视为一页（每页数据总和的高度超过可视区域高度），那整体数据相当于被切割成二维数组，如下：
[
……
[item1, item2, ……item10], // page1
[item1, item2, ……item10], // page2
[item1, item2, ……item10], // page3
[item1, item2, ……item10], // page4
[item1, item2, ……item10] // page5
……
]- 不在可视区域的页，只用一个dom渲染代替，就能减少dom数量，达到长列表的优化目的。即：
[
……
page1,
page2,
[item1, item2……, item10], // page3可视
page4,
page5
……
]主要代码片段（加了注释，vue2的写法）
// 主要data定义
data() {
return {
curPage: 0, // 当前请求到第几页
limit: 10,
pageHeight: [], // 每屏高度存储
visualIndex: [], // 存储可视区域pageNum
list: []
}
},
methods: {
// 数据组装
buildData () {
const arr = this.list
const curP = this.curPage
const result = Array(10).fill(0).map((_item, index) => index + this.limit * curP)
// 以页数分二位数组[ [result1], [result2]…… ]
arr[curP] = result
this.list = [...arr]
console.log('this.list: ', this.list)
// 监听
this.observePage(curP)
// 计算每屏高度
this.setPageHeight(curP)
this.curPage++
}
// 视图监听
observePage(pageNum) {
if (pageNum < 1) return
const _that = this
// 创建并返回一个 IntersectionObserver 对象实例，并且整个显示区域(top: 0, bottom: 0)作为参照区域
const observerView = Taro.createIntersectionObserver().relativeToViewport({ top: 0, bottom: 0})
setTimeout(function() {
// 目标节点，即每行item的id作为目标节点标识(#item${pageNum})显示在参照区域中，就进行处理
observerView.observe(`#item${pageNum}`, (res) => {
console.log('observerView res: ', res)
// res.intersectionRatio相交区域占目标节点的布局区域的比例
if (res.intersectionRatio > 0) {
// 当前页和上下页页数存入可视区变量visualIndex
_that.visualIndex = [pageNum - 1, pageNum, pageNum + 1]
}
})
}, 20)
}
// 遍历计算每一页高度
setPageHeight(page) {
const _that = this
// 获取目标节点
const node = Taro.createSelectorQuery().select(`#item${page}`)
setTimeout(function() {
node.boundingClientRect(rect => {
if (!rect) return
// 更新对应页数高度
_that.pageHeight[page] = rect.height
console.log('_that.pageHeight: ', JSON.stringify(_that.pageHeight))
}).exec()
}, 40)
}
}PS：再啰嗦下，代码不是放到小程序就能用的哈，还是看思想，根据自己具体使用小程序框架和第三方库进行改动
