RecyclerListView

这是一款基于@tarojs/components/virtual-list组件实现的高性能列表组件，除性能优化之外，亦扩展了大量API以尽可能满足大部分应用场景。

npm install --save recyclerlist

• 简介
• 实现了哪些功能
• Demo
• Props

简介

recyclerlist在@tarojs/components/virtual-list的基础上改造而来，整体思路为延续其展示可视区域，销毁非可视区域元素的思路，并结合recyclerlistview的内存复用机制对其性能进行调优，其中原理下面我会提到。当然做这些工作的前提是virtual-list组件对子组件绝对布局的支持。

实现了哪些功能

• 多列自定义高度瀑布流
  • 瀑布流
  • item高度自定义
• 支持渲染Header
• 新增分页事件监听onEndReached
• 内存复用
  原理一句话：将old dom的key赋值给new dom

Demo

// 引用
import RecyclerList from 'recyclerlist';

// props使用
<RecyclerList
  width={width}
  height={height}
  itemData={list}
  itemCount={list.length}
  itemHeight={({ item, index }) => itemHeight({ item, index })}
  itemKey={({item, index}) => itemKey({item, index})}
  itemType={({item, index}) => itemType({item, index})}
  renderHeader={renderHeader}
  makeHeaderHeight={123}
  numColumns={2}
  onEndReached={onEndReached}
>
  {props => renderItem(props)}
</RecyclerList>

Props

| Prop | Required | Params Type | Description | | --- | --- | --- | --- | | width | yes | number | 列表窗口宽度 | | height | yes | numer | 列表窗口高度 | | itemData | yes | array | 列表数据 | | itemCount | yes | number | 列表数据长度 | | itemHeight | yes | (params: { item: object, index: number }) => number | number | item高度 | | itemKey | yes | (params: { item: object, index: number }) => any | item唯一标识，内存复用机制关键参数，务必保持唯一性 | | itemType | yes | (params: { item: object, index: number }) => any | item类型，如1：文字、2：图片、3：视频，内存复用机制关键参数，务必谨慎对待 | | renderHeader | No | () => JSX.Element | 渲染Header | | makeHeaderHeight | No | number | renderHeader、makeHeaderHeight务必成对出现 | | numColumns | Yes | number | 列数，默认值为1 | | onEndReached | No | () => void | 监听分页事件 |

Note：详细api说明请参考源码。