react-auto-list

this is vue-auto-list

---

fixed height

1import {VirtualList} from '.'
2{list2.length && (
3  <VirtualList<ItemType>
4    list={list2}
5    height={400}
6    itemHeight={40}
7    scrollToBottom={scrollToBottom}
8    scrollToTop={scrollToTop2}
9    itemKey="id"
10    renderFooter={
11      <div style={{ textAlign: "center" }}>loading...</div>
12    }
13    renderHeader={<div style={{ textAlign: "center" }}>header</div>}
14    renderItem={({ index }: ItemType) => (
15      <div
16        style={{
17          outline: "1px solid red",
18          outlineOffset: -2,
19          backgroundColor: "#fff",
20          height: 40,
21        }}
22      >
23        {index}
24      </div>
25    )}
26  />
27}

auto size height

1import {AutoSizeVirtualList} from '.'
2{list2.length && (
3  <AutoSizeVirtualList<ItemType>
4    list={list2}
5    height={400}
6    itemHeight={40}
7    itemKey={"id"}
8    scrollToTop={scrollToTop2}
9    scrollToBottom={scrollToBottom}
10    renderFooter={
11      <div style={{ textAlign: "center" }}>loading...</div>
12    }
13    renderHeader={
14      <div style={{ textAlign: "center" }}>header</div>
15    }
16    renderItem={({ name, height }: ItemType) => (
17      <div
18        style={{
19          outline: "1px solid red",
20          outlineOffset: -2,
21          height: height,
22          backgroundColor: "#fff",
23        }}
24      >
25        {name}
26      </div>
27    )}
28  />
29)}

auto reverse size height

1import {RevertAutoSizeVirtualList} from '.'
2{list2.length && (
3  <RevertAutoSizeVirtualList<ItemType>
4    list={list2}
5    height={400}
6    itemHeight={40}
7    itemKey={'id'}
8    scrollToTop={scrollToTop2}
9    renderFooter={<div style={{ textAlign: 'center' }}>拼命加载中...</div>}
10    scrollToBottom={scrollToBottom}
11    renderItem={({ name, height }: ItemType) => (
12      <div
13        style={{
14          outline: '1px solid red',
15          outlineOffset: -2,
16          height: height,
17          backgroundColor: '#fff'
18        }}
19      >
20        {name}
21      </div>
22    )}
23  />
24)}

APIS

Prop	Description	Type	Default
list	Data list	Array	-
height	list height	number	400
itemHeight	list item height	number	40
minSize	show cnt	number	20
itemKey	react keys	key in T	-
scrollToTop	go to top	number	0
scrollToBottom	scrolled to bottom	(e) => void	-
renderFooter	render footer( not revert )	ReactNode	-
renderHeader	render header	ReactNode	-
renderItem	render item	(item: T) => ReactNode	-

可以把 git 代码拉取下来，运行 demo 查看更多配置