ClassVirtualList<ItemType, ItemKey>

虚拟列表组件。

Type Parameters

Hierarchy

Constructors

Properties

_container: DOMWrap

滚动区域容器。

_eventEmitter: Emitter<VirtualListEvent<ItemType>>

事件订阅器。

_itemList: ItemType[] = []

数据项。

_itemNodes: HTMLElement[] = []

数据项对应的渲染节点。

_onClickFn?: IEventHandler

绑定到容器 click 事件的监听函数。

_onScrollFn?: (() => void)

绑定到容器 scroll 事件的监听函数。

组件选项。

_stateFlags: {
    renderBoundary: boolean[];
    renderEmpty: boolean[];
    renderError: boolean[];
    renderLoading: boolean[];
} = ...

状态记录。

_stateNodes: {
    renderBoundary: (undefined | null | HTMLElement)[];
    renderEmpty: (undefined | null | HTMLElement)[];
    renderError: (undefined | null | HTMLElement)[];
    renderLoading: (undefined | null | HTMLElement)[];
} = ...

状态节点。

内部数据项的访问器。

Accessors

  • get inited(): boolean
  • 获取当前是否已初始化(完成首批数据的加载和渲染)。

    Returns boolean

Methods

  • 检查当前滚动位置,如果在数据预读区间,则加载数据。

    Returns void

  • 执行删除操作。

    Parameters

    • itemList: ItemType[]

      要删除的数据项列表。

    • itemNodes: DOMWrap

      要删除的数据节点列表。

    Returns void

  • 触发单次渲染完成事件。

    Parameters

    • position: RenderPosition

      渲染位置。

    • data: ItemType[]

      渲染的数据项。

    • nodes: ArrayLike<HTMLElement>

      渲染的数据项节点。

    Returns void

  • 加载数据并渲染数据。

    Parameters

    • position: RenderPosition

      渲染位置。

    • loadData: (() => Promise<undefined | null | ItemType[]>)

      加载数据的函数。

        • (): Promise<undefined | null | ItemType[]>
        • Returns Promise<undefined | null | ItemType[]>

    • updateAndRenderData: ((data: ItemType[]) => void)

      同步数据变化并渲染数据。

        • (data): void
        • Parameters

          Returns void

    Returns Promise<void>

    promise。

  • 根据数据项的 id 寻找数据项。

    Parameters

    Returns number

    数据项的索引,如果找不到数据项,则返回 -1。

  • 在渲染前后,保持当前可视区域不变。

    Parameters

    • render: (() => void)

      渲染函数。返回值为 true 时保持当前可视区域不变。

        • (): void
        • Returns void

    Returns void

  • 设置状态并渲染状态。

    Parameters

    • renderFn:
          | "renderLoading"
          | "renderError"
          | "renderEmpty"
          | "renderBoundary"

      渲染状态的类型。

    • state: boolean

      状态。

    • position: RenderPosition

      渲染位置。

    • Optionalextra: unknown

      用于渲染的额外数据。

    Returns void

  • 设置无数据状态。

    Parameters

    • state: boolean

      是否为无数据状态。

    • OptionalonAfterSet: (() => void)

      进行事件操作前执行的函数。

        • (): void
        • Returns void

    Returns void

  • 判定当前是否应保持默认视图位置(最顶或最底)。

    Returns boolean

    判定结果。

  • 追加数据到边界。如果未到达边界,则数据不追加。

    Parameters

    • data: ItemType[]

      数据。

    • position: RenderPosition

      位置。

    • OptionalkeepDefaultView: boolean

      是否保持默认视图位置。

    Returns boolean

    数据是否已追加。

  • 检查当前滚动位置,如果在数据预读区间,则加载数据。 检查操作在 0.5s 内最多执行一次。

    Returns void

  • 获取当前数据列表是否为空。

    Returns boolean

    当前数据列表是否为空。

  • 移除多个数据项。

    Parameters

    Returns undefined | ItemType[]

    被移除的数据项。如果没有数据项被移除,则返回 undefined。

    1.0.0-beta.1

  • 重置无数据状态、边界状态和错误状态并请求数据(如果不是处在这三个状态,则不请求)。

    Parameters

    Returns void

  • 滚动到列表尾部。

    Parameters

    • exceptState: boolean = false

    Returns void

  • 滚动到列表头部。

    Parameters

    • exceptState: boolean = false

      是否排除头部的状态节点。

    Returns void

  • 更新数据项。

    Parameters

    • newData: ItemType

      新数据。

    • OptionalkeyValue: ItemType[ItemKey]

      要更新的数据项的 key 值。如果为空,则以 newData 的 key 值为准。

    Returns boolean

    数据项是否在当前列表中。