English | 简体中文
Ray recycle list
$ npm install @ray-js/recycle-list
# or
$ yarn add @ray-js/recycle-list
import React, { useState, useMemo } from 'react';
import { View } from '@ray-js/components';
import RecycleView, { transformRow1ToRowN } from '@ray-js/recycle-list';
import styles from './index.module.less';
let index = 0;
// mock init data
const mockData: { height: number; [key: string]: any }[] = [];
for (let i = 1; i < 21; i++) {
mockData.push({
timeC: Math.floor(i / 5),
height: 100,
text: `row ${index++}`,
});
}
export default function Home() {
const [data, setData] = useState(mockData);
const rowNum = 3;
const rowGroupOffsetTopHeight = 30;
const realData = useMemo(() => {
//Field values used for grouping. Values corresponding to the same field are grouped into one group.
const groupKey = 'timeC';
return transformRow1ToRowN(data, groupKey, rowNum, rowGroupOffsetTopHeight);
}, [data.length, rowNum, rowGroupOffsetTopHeight]);
const handleScrollToLower = e => {
const len = Math.floor(data.length / 5);
if (len > 10) {
return;
}
ty.showLoading({
title: '',
mask: true,
});
// Simulate data loading
setTimeout(() => {
const len = Math.floor(data.length / 5);
const random = Math.floor(Math.random() * 10) + 10;
for (let i = 0; i < random; i++) {
data.push({
height: 100,
timeC: Math.floor(i / 5) + len,
text: `row ${index++}`,
});
}
setData([...data]);
ty.hideLoading();
}, 1000);
};
return (
<View className={styles.app}>
<RecycleView
overScanCount={20}
className={styles.recycleView}
data={realData}
fixedHeader
headerHeight={100}
renderHeader={() => {
return <View style={{ height: '100px', backgroundColor: 'yellow' }}>this is header</View>;
}}
bottomHeight={150}
renderBottom={() => {
return <View style={{ height: '150px', backgroundColor: 'yellow' }}>this is bottom</View>;
}}
renderItem={item => {
const { groupKey, data } = item;
return (
<View
key={groupKey}
style={{
backgroundColor: 'white',
fontWeight: 'bold',
color: 'red',
height: '100%',
}}
>
<View>Title: {groupKey}</View>
<View
style={{
display: 'flex',
flexWrap: 'wrap',
}}
>
{data.map(innerItem => {
return (
<View
key={innerItem.text}
style={{
width: '33%',
height: `${innerItem.height}px`,
}}
>{`${innerItem.text}`}</View>
);
})}
</View>
</View>
);
}}
onScrollToLower={handleScrollToLower}
/>
</View>
);
}
.app {
text-align: center;
}
.recycleView {
height: 100vh;
}