当前位置: 首页 > 工具软件 > taro-listview > 使用案例 >

基于Taro列表组件VirtualList的源码改造方案

董庆
2023-12-01

RecyclerList

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

npm install --save recyclerlist

简介

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

PropRequiredParams TypeDescription
widthyesnumber列表窗口宽度
heightyesnumer列表窗口高度
itemDatayesarray列表数据
itemCountyesnumber列表数据长度
itemHeightyes(params: { item: object, index: number }) => number | numberitem高度
itemKeyyes(params: { item: object, index: number }) => anyitem唯一标识,内存复用机制关键参数,务必保持唯一性
itemTypeyes(params: { item: object, index: number }) => anyitem类型,如1:文字、2:图片、3:视频,内存复用机制关键参数,务必谨慎对待
renderHeaderNo() => JSX.Element渲染Header
makeHeaderHeightNonumberrenderHeader、makeHeaderHeight务必成对出现
numColumnsYesnumber列数,默认值为1
onEndReachedNo() => void监听分页事件

Note:详细api说明请参考源码

 类似资料: