长列表优化——虚拟列表

前言

场景是小程序长列表优化，框架基于mpvue，固定高度。（动态高度暂时先不考虑）

关于recycle-view

微信官方的提供的recycle-view，是原生的小程序组件。但如果你是基于mpvue框架的话，对第三方原生组件可能不太友好——花了很多时间，最终也没有个所以然，所以就改方案自己来好了。
如果你想要尝试的话，下面的一些坑可以看下：
1.这里是mpvue官方对于第三方原生组件的建议，mpvue官方是建议原生和mpvue做分离（ps:感觉很麻烦）。如果只是想引入第三方原生组件，做法可以参考这里。
2.在完成引入第三方组件后，如果直接按官方文档的写法，会出现 page.selectComponent is not a function的报错,因为mpvue的this和原生的this指向不同，所以应该使用this.$mp.page
3.后面出现了调用append后页面没内容的情况，也没的办法了，在看了recycle-context源码和社区后，还是算了吧
（ps:源码内部其实是利用page自身的forceUpdate，来强制刷新；社区也有类似的问题，但没人解答；出于时间考虑，就没用这个了；说不定思路在recycle-view其他源码上😅）

如果有人弄出来了，请留言指导，感谢大佬。

回到虚拟列表

大致原理：
控制滚动元素在可滚动区域中的位置，使其显示在可视区域

• 滚动元素区域：虚拟列表一般滚动元素只是全部数据中的一小部分，可认为设置，可以为3倍可视区域，也可以跟可视区域一样，
• 可滚动区域：全部数据的渲染后的区域
• 可视区域：浏览器可视窗口大小、手机可视窗口大小

假设手机为375667, 有1000条条数据需要渲染，每条高60， 滚动元素区域
那么 滚动元素区域有60Math.ceil(667/60)，可滚动区域 为 100060，可视区域* 为667

大体步骤为：
1.通过触发scroll滚动事件，计算出startIndex、endIndex
2.根据starIndex、endIndex计算出滚动元素区域
3.根据starIndex、endIndex计算startOffset、endOffset
4.渲染

虚拟列表1.png

实际在DOM实现上有两种思路：

• 一是通过padding-top 和padding-bottom来设置startOffset、endOffset从而撑起可滚动区域的高度，从而可以滚动

<div class='wrapper'>  //可视区域
        <div style='padding-top: xx px, padding-bottom:  xx px'> 
          //滚动区域
        </div>
</div>

• 二是一开始设置好可滚动区域高度，通过移动元素区域来实现，

<div className='wrapper'>  //可视区域 position:relative
  <div className='list'></div>  // 可滚动区域
  <div className='visible-list' style="transform: translate3d(0, XX px, 0)"></div>  //元素区域  position:absolute
</div>

推荐使用第二用，translate3d可开启硬件加速，提升渲染性能

关于动态高度

还没实践过，后续再补充

参考：
1.浅说虚拟列表的实现原理
2.再谈前端虚拟列表的实现
3.前端长列表原理及优化
4.长列表渲染实践
5.一个简单实现的vue虚拟列表