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)
    }
}

完整片段参考小程序长列表taro+vue2

PS：再啰嗦下，代码不是放到小程序就能用的哈，还是看思想，根据自己具体使用小程序框架和第三方库进行改动