微信小程序中实现virtual -列表的方法详解（微信小程序视图类）

【相关学习推荐:微信小程序教程】

后台小程序在很多场景下都会遇到很长的交互列表。当一个页面呈现太多wxml节点时，会导致小程序页面卡住和空白。主要原因如下:

1.列表数据量大，初始化setData和渲染列表wxml需要很长时间；

2.渲染的wxml节点很多，每次setData更新视图时都需要创建新的虚拟树，与旧树的diff操作需要花费大量时间；

3.呈现的wxml节点很多，而page能够容纳的wxml是有限的，这会占用很高的内存。

微信小程序本身的scroll -视图并没有针对长列表进行优化，官方组件recycle -视图是一个类似于virtual-list的长列表组件。现在我们要分析虚拟列表的原理，从零开始实现一个小程序的virtual -列表。

实现原理首先我们要了解什么是virtual-list，它是一种滚动列表的前端优化技术，初始只加载“可视区域”及其附近的dom元素，滚动时通过重用dom元素只渲染“可视区域”及其附近的dom元素。与传统的列表方法相比，它可以实现非常高的初始渲染性能，并且在滚动期间仅保持超轻的dom结构。

虚拟列表最重要的概念:

可滚动区:例如，如果列表容器的高度为600，并且内部元素的高度之和超过了容器的高度，则可以滚动该区域，这就是“可滚动区”；

可见区域:例如列表容器的高度为600，右侧有一个垂直滚动条用于滚动。视觉上可见的内部区域是“可见区域”。

实现虚拟列表的核心是监控滚动事件，并通过滚动元素的滚动距离偏移量和totalSize之和来动态调整“可视区域”数据渲染的顶部距离和截取索引值。实施步骤如下:

1.监控滚动事件的scrollTop/scrollLeft，计算“可视区域”的startIndex项的索引值和ending项的索引值；

2.通过startIndex和endIndex截取长列表“可见区域”中的数据项，并更新到列表中；

3.计算可滚动区的高度和项目的偏移量，并将其应用于可滚动区和项目。

1.列表项的宽度/高度和滚动偏移量在虚拟列表中，“可滚动区”是根据每个列表项的宽度/高度计算的，可能需要进行自定义。定义itemSizeGetter函数来计算列表项的宽度/高度。

itemSize getter（itemSize）{ return（index:number）=》{ if（is function（itemSize））{ return itemSize（index）；} return is array（itemSize）？在这个微信小程序的virtual-list组件的编写过程中，itemSize参考主要参考了一些优秀的开源虚拟列表实现方案:

React -Tiny -Virtual -List React -虚拟化React -Window总结通过以上讲解，在微信小程序环境中已经初步实现了虚拟列表，对虚拟列表的原理也有了进一步的了解。然而，对于瀑布布局，列表项的不可预测大小和其他场景仍然不适用。在快速滚动的过程中，渲染前仍会出现空白屏幕，这可以通过增加“可见区域”外预渲染的项目数量来缓解。

以上就是微信小程序中如何实现virtual -列表的详细内容。更多内容请关注主机参考等相关文章！

这几篇文章你可能也喜欢：

• 微信小程序中如何实现virtual-list详解（微信小程序视图类）

本文由主机参考刊发，转载请注明：微信小程序中实现virtual -列表的方法详解（微信小程序视图类） https://zhujicankao.com/101215.html