remax-recycle-view

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

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