本文整理自网络，侵删。

recycle-view

小程序长列表组件

使用此组件需要依赖小程序基础库 2.2.2 版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。

背景

?目前小程序会有不少的应用场景里会用到无限长列表的交互，当一个页面展示很多信息的时候，会造成小程序页面的卡顿以及白屏。原因有如下几点：

列表数据很大，首次 setData 的时候耗时高
渲染出来的列表 DOM 结构多，每次 setData 都需要创建新的虚拟树、和旧树 diff 操作耗时都比较高
渲染出来的列表 DOM 结构多，占用的内存高，造成页面被系统回收的概率变大。

因此就有长列表组件来解决这些问题。

实现思路

?核心的思路是只渲染显示在屏幕的数据，基本实现就是监听 scroll 事件，并且重新计算需要渲染的数据，不需要渲染的数据留一个空的 div 占位元素。

假设列表数据有100个 item，知道了滚动的位置，怎么知道哪些 item 必须显示在页面？因为 item 还没渲染出来，不能通过 getComputedStyle 等 DOM 操作得到每个 item 的位置，所以无法知道哪些 item 需要渲染。为了解决这个问题，需要每个 item 固定宽高。item 的宽高的定义见下面的 API 的createRecycleContext()的参数 itemSize 的介绍。

滚动过程中，重新渲染数据的同时，需要设置当前数据的前后的 div 占位元素高度，同时是指在同一个渲染周期内。页面渲染是通过 setData 触发的，列表数据和 div 占位高度在2个组件内进行 setData 的，为了把这2个 setData 放在同一个渲染周期，用了一个 hack 方法，所以定义 recycle-view 的 batch 属性固定为 batch="{{batchSetRecycleData}}"。

在滚动过程中，为了避免频繁出现白屏，会多渲染当前屏幕的前后2个屏幕的内容。

包结构

长列表组件由2个自定义组件 recycle-view、recycle-item 和一组 API 组成，对应的代码结构如下

├── miniprogram-recycle-view/
    └── recycle-view 组件
    └── recycle-item 组件
    └── index.js

包结构详细描述如下：

目录/文件	描述
recycle-view 组件	长列表组件
recycle-item 组件	长列表每一项 item 组件
index.js	提供操作长列表数据的API

使用方法：

1.安装组件

npm install --save miniprogram-recycle-view

2.在页面的 json 配置文件中添加 recycle-view 和 recycle-item 自定义组件的配置

{
  "usingComponents": {
    "recycle-view": "miniprogram-recycle-view/recycle-view",
    "recycle-item": "miniprogram-recycle-view/recycle-item"
  }
}

3.WXML 文件中引用 recycle-view

<recycle-view batch="{{batchSetRecycleData}}" id="recycleId">
  <view slot="before">长列表前面的内容</view>
  <recycle-item wx:for="{{recycleList}}" wx:key="id">
    <view>
        <image style='width:80px;height:80px;float:left;' src="{{item.image_url}}"></image>
      {{item.idx+1}}. {{item.title}}
    </view>
  </recycle-item>
  <view slot="after">长列表后面的内容</view>
</recycle-view>

recycle-view 的属性介绍如下：

字段名	类型	必填	描述
id	String	是	id必须是页面唯一的字符串
batch	Boolean	是	必须设置为`{{batchSetRecycleData}}`才能生效
height	Number	否	设置recycle-view的高度，默认为页面高度
width	Number	否	设置recycle-view的宽度，默认是页面的宽度
enable-back-to-top	Boolean	否	默认为false，同scroll-view同名字段
scroll-top	Number	否	默认为false，同scroll-view同名字段
scroll-y	Number	否	默认为true，同scroll-view同名字段
scroll-to-index	Number	否	设置滚动到长列表的项
placeholder-image	String	否	默认占位背景图片，在渲染不及时的时候显示，不建议使用大图作为占位。建议传入SVG的Base64格式，可使用工具将SVG代码转为Base64格式。支持SVG中设置rpx。
scroll-with-animation	Boolean	否	默认为false，同scroll-view的同名字段
lower-threshold	Number	否	默认为false，同scroll-view同名字段
upper-threshold	Number	否	默认为false，同scroll-view同名字段
bindscroll	事件	否	同scroll-view同名字段
bindscrolltolower	事件	否	同scroll-view同名字段
bindscrolltoupper	事件	否	同scroll-view同名字段

recycle-view 包含3个 slot，具体介绍如下：

名称	描述
before	默认 slot 的前面的非回收区域
默认 slot	长列表的列表展示区域，recycle-item 必须定义在默认 slot 中
after	默认 slot 的后面的非回收区域

长列表的内容实际是在一个 scroll-view 滚动区域里面的，当长列表里面的内容，不止是单独的一个列表的时候，例如我们页面底部都会有一个 copyright 的声明，我们就可以把这部分的内容放在 before 和 after 这2个 slot 里面。

recycle-item 的介绍如下：

需要注意的是，recycle-item 中必须定义 wx:for 列表循环，不应该通过 setData 来设置 wx:for 绑定的变量，而是通过createRecycleContext方法创建RecycleContext对象来管理数据，createRecycleContext在 index.js 文件里面定义。建议同时设置 wx:key，以提升列表的渲染性能。

阅读剩余部分