1 | import { Component, ComponentType, CSSProperties, ReactNode } from 'react'
|
2 | import { StandardProps, BaseEventOrigFunction } from '../types/common'
|
3 | import { ScrollViewProps } from '../types/ScrollView'
|
4 |
|
5 | interface VirtualListProps extends StandardProps {
|
6 | /** 列表的高度。 */
|
7 | height: string | number
|
8 | /** 列表的宽度。 */
|
9 | width: string | number
|
10 | /** 列表的长度 */
|
11 | itemCount: number
|
12 | /** 渲染数据 */
|
13 | itemData: any[]
|
14 | /** 列表单项的大小,垂直滚动时为高度,水平滚动时为宽度。 */
|
15 | itemSize: number
|
16 | /** 解开高度列表单项大小限制,默认值使用: itemSize (请注意,初始高度与实际高度差异过大会导致隐患)。 */
|
17 | unlimitedSize?: boolean
|
18 | /** 布局方式,默认采用 "absolute" */
|
19 | position?: 'absolute' | 'relative'
|
20 | /** 初始滚动偏移值,水平滚动影响 scrollLeft,垂直滚动影响 scrollTop。 */
|
21 | initialScrollOffset?: number
|
22 | /** 列表内部容器组件类型,默认值为 View。 */
|
23 | innerElementType?: ComponentType
|
24 | /** 底部区域 */
|
25 | renderBottom?: ReactNode
|
26 | /** 滚动方向。vertical 为垂直滚动,horizontal 为平行滚动。默认为 vertical。 */
|
27 | layout?: 'vertical' | 'horizontal'
|
28 | /** 列表滚动时调用函数 */
|
29 | onScroll?: (event: VirtualListEvent<VirtualListProps.onScrollDetail>) => void
|
30 | /** 调用平台原生的滚动监听函数。 */
|
31 | onScrollNative?: BaseEventOrigFunction<ScrollViewProps.onScrollDetail>
|
32 | /** 在可视区域之外渲染的列表单项数量,值设置得越高,快速滚动时出现白屏的概率就越小,相应地,每次滚动的性能会变得越差。 */
|
33 | overscanCount?: number
|
34 | /** 是否注入 isScrolling 属性到 children 组件。这个参数一般用于实现滚动骨架屏(或其它 placeholder) 时比较有用。 */
|
35 | useIsScrolling?: boolean
|
36 | children?: ComponentType<{
|
37 | /** 组件 ID */
|
38 | id: string
|
39 | /** 单项的样式,样式必须传入组件的 style 中 */
|
40 | style?: CSSProperties
|
41 | /** 组件渲染的数据 */
|
42 | data: any
|
43 | /** 组件渲染数据的索引 */
|
44 | index: number
|
45 | /** 组件是否正在滚动,当 useIsScrolling 值为 true 时返回布尔值,否则返回 undefined */
|
46 | isScrolling?: boolean
|
47 | }>
|
48 | }
|
49 |
|
50 | declare namespace VirtualListProps {
|
51 | // eslint-disable-next-line @typescript-eslint/class-name-casing
|
52 | interface onScrollDetail {
|
53 | clientWidth: number
|
54 | clientHeight: number
|
55 | }
|
56 | }
|
57 |
|
58 | interface VirtualListEvent<T> {
|
59 | /** 滚动方向,可能值为 forward 往前, backward 往后。 */
|
60 | scrollDirection: 'forward' | 'backward'
|
61 | /** 滚动距离 */
|
62 | scrollOffset: number
|
63 | /** 当滚动是由 scrollTo() 或 scrollToItem() 调用时返回 true,否则返回 false */
|
64 | scrollUpdateWasRequested: boolean
|
65 | /** 当前只有 React 支持 */
|
66 | detail?: {
|
67 | scrollLeft: number
|
68 | scrollTop: number
|
69 | scrollHeight: number
|
70 | scrollWidth: number
|
71 | clientWidth: number
|
72 | clientHeight: number
|
73 | }
|
74 | }
|
75 |
|
76 | /**
|
77 | * @classification viewContainer
|
78 | * @supported weapp, swan, alipay, tt, qq, jd, h5
|
79 | * @example
|
80 | * ```tsx
|
81 | * import VirtualList from `@tarojs/components/virtual-list`
|
82 | *
|
83 | * function buildData (offset = 0) {
|
84 | * return Array(100).fill(0).map((_, i) => i + offset);
|
85 | * }
|
86 | *
|
87 | * const Row = React.memo(({ id, index, style, data }) => {
|
88 | * return (
|
89 | * <View id={id} className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
|
90 | * Row {index}
|
91 | * </View>
|
92 | * );
|
93 | * })
|
94 | *
|
95 | * export default class Index extends Component {
|
96 | * state = {
|
97 | * data: buildData(0),
|
98 | * }
|
99 | *
|
100 | * render() {
|
101 | * const { data } = this.state
|
102 | * const dataLen = data.length
|
103 | * return (
|
104 | * <VirtualList
|
105 | * height={500} // 列表的高度
|
106 | * width='100%' // 列表的宽度
|
107 | * itemData={data} // 渲染列表的数据
|
108 | * itemCount={dataLen} // 渲染列表的长度
|
109 | * itemSize={100} // 列表单项的高度
|
110 | * >
|
111 | * {Row} // 列表单项组件,这里只能传入一个组件
|
112 | * </VirtualList>
|
113 | * );
|
114 | * }
|
115 | * }
|
116 | * ```
|
117 | * @see https://taro-docs.jd.com/taro/docs/virtual-list/
|
118 | */
|
119 | declare class VirtualList extends Component<VirtualListProps> {}
|
120 |
|
121 | export = VirtualList
|