小程序中实现视图懒加载

欢迎访问我的 个人博客

前言

小程序中对初始时渲染太多wxml节点数做懒加载是很有必要的！这是一个真实案例

在写小程序时，有个页面由于要展示很多内容，光弹窗都6个，还有大量的列表，所以wxml节点数很多，超过了小程序建议的1000个节点以下。

示例项目已放到 github 和 码云 上，文章最后附有地址。

问题

这个内容很多的页面是分包的第一个页面，再此之前开发工具上能正常的运行，因此没有去管它。但是在上周六（2020年1月16日）后，开发工具上就出问题了！！！进入这个分包页面，视图半天才渲染，但事件是会立即执行的（看点击事件及接口请求情况得出的结论）。由于代码和前一天相比没有改动，并且手机上是正常的，所以第一时间就怀疑是不是开发工具出问题了，于是就删掉了工具，并重新下载了两次（一次最新稳定版，一次最新预发布版本），可还是不管用，依然这分包的这个页面，渲染不出来。
之后，又将手机的性能监听面板打开，发现再次渲染耗时那数值一直在闪动，但始终停留在0ms，就肯定的是小程序渲染出问题了。又怀疑只要是分包页面都有问题，就发现其他分包页面，并没有问题。
然后，想着之前用体验评分时，已经提示了wxml节点数过多，就试探性的注释了一些代码。好家伙，开发工具立马就正常了。
在确定问题前，没有第一时间考虑自己代码的问题，因为就过了一天开发工具就不能运行了，这确实很奇怪。

优化代码

初次渲染时，并不需要全部都渲染出来，所以可以做懒加载，显示时再渲染，通过 wx:if 来控制是否显示。

通过测试，做了懒加载后的体验评分在性能上是比不做要高的。下面是两张对比图：

没有使用懒加载

使用了懒加载

项目介绍

如上图要实现的效果是，初始渲染时，只渲染玄幻栏目的数据，当往下滑动快触底时，再渲染下一个。如果初始渲染完成后，点击第四个都市栏目，则需把二三四个栏目都渲染出来。

懒加载原理

小程序通过setData后的数据，再放入wxml上就会被渲染，但是我们可以通过设置wx:if让，节点不显示，就不会去渲染。当滚动触底后，再通过一个标识值来判断后续的渲染情况。

此例子中与只有触底后渲染下面的视图，再加了点击左边的分类时，也做做渲染。

比如：初始时只渲染了第一组数据，当时我点击了第四个分类时，要将第二个，第三个，第四个的数据都显示出来。 这也是通过这个标识值来判断。

示意图：

项目地址：

github地址

码云地址