/remax-recycle-view

recycle-view component for remax

Primary LanguageTypeScriptMIT LicenseMIT

remax-recycle-view

NPM version build status Test coverage npm download

利用虚拟滚动技术的长列表组件，解决了长列表渲染的性能问题。

Live Demo

Install

$ npm i remax-recycle-view --save

Usage

import React from 'react';
import { View } from 'remax/one';
import RecycleView from 'remax-recycle-view/lib/index'; // 重要，由于remax的跨平台同构特性，需要这样引入
import styles from './index.css';

const mockData: { height: number; [key: string]: any }[] = [];
for (let i = 0; i < 500; i++) {
  mockData.push({
    height: ((i % 5) + 1) * 100,
    text: `mock block ${i}`,
  });
}

export default () => {
  return (
    <View className={styles.app}>
      <RecycleView
        className={styles.recycleView}
        placeholderImage="https://gw.alicdn.com/tfs/TB18fUJCxD1gK0jSZFyXXciOVXa-750-656.png"
        data={mockData}
        headerHeight={200}
        bottomHeight={300}
        renderHeader={() => {
          return <View style={{ height: 200, backgroundColor: 'yellow' }}>this is header</View>;
        }}
        renderBottom={() => {
          return <View style={{ height: 300, backgroundColor: 'yellow' }}>this is bottom</View>;
        }}
        renderItem={({ text, __index__ }) => {
          const colors = ['purple', 'red', 'blue'];
          const color = colors[__index__ % 3];
          return (
            <View style={{ backgroundColor: color, color: '#fff', height: '100%' }}>{text}</View>
          );
        }}
      />
    </View>
  );
};

API

属性名 类型 必填 默认值 描述
className string 否 无 class 样式名称
style React.CSSProperties 否 无 React 行内样式
data {height: number; [key:string]: any}[] 否 [] 需要渲染的长列表数据(每条数据必须要有 height 表示高度)
scrollTopByIndex number 否 无 值应为某子元素在 data 中的 index，则滚动到该元素，元素顶部对齐滚动区域顶部。
overscanCount number 否 5 预渲染的个数(会渲染当前视口的前 overscanCount 个,和后 2 * overscanCount 个)
placeholderImage string 否 无 对于来不及渲染的元素，可以用一个图片地址来作为背景
headerHeight number 否 0 如果有 renderHeader 属性方法，则必须要有 headerHeight 表示头部的高度
bottomHeight number 否 0 如果有 renderBottom 属性方法，则必须要有 bottomHeight 表示底部的高度
renderHeader () => React.ReactElement 否 无 渲染头部的方法，会作为长列表的头部进行加载
renderBottom () => React.ReactElement 否 无 渲染底部的方法，会作为长列表的底部进行加载
renderItem (item: Item, index: number) => React.ReactElement 是 无 渲染每条数据的方法，注意： 该方法中的 index 不代表该条目在总数据中的 index，如果需要在总数据中的 index， 请使用 item['__index__']

除了以上属性，你还可以传当前平台 scroll-view 支持的任意属性来实现业务逻辑，比如： 支付宝小程序通过lower-threshold和onScrollToLower实现下滑加载更多的业务逻辑

License

MIT