im-ui-mobile/types/components/virtual-list.d.ts

A Vue3.0 + Typescript instant messaging component library for Uniapp

import { AllowedComponentProps, VNodeProps, ComponentCustomProps } from 'vue'

declare type LoadingStatus = 'loading' | 'no-more' | 'error' | 'idle'
declare type ScrollAlign = 'top' | 'center' | 'bottom'

declare interface ScrollToItemOptions {
    align?: ScrollAlign
    animated?: boolean
}

declare interface VirtualListProps<T = any> {
    // 数据相关
    data?: T[]
    keyField?: string

    // 尺寸相关
    estimatedItemSize?: number
    buffer?: number
    height?: string | number

    // 滚动相关
    lowerThreshold?: number
    upperThreshold?: number
    scrollTop?: number

    // 加载相关
    showTopLoading?: boolean
    showBottomLoading?: boolean
    topStatus?: LoadingStatus
    bottomStatus?: LoadingStatus

    // 功能相关
    showBackToTop?: boolean
    backToTopThreshold?: number
    scrollIntoView?: string
    keepScrollPosition?: boolean
}

declare interface VirtualListEmits<T = any> {
    // 滚动事件
    onScroll?: (event: any) => void
    onScrollToLower?: () => void
    onScrollToUpper?: () => void

    // 加载事件
    onTopLoad?: () => void
    onBottomLoad?: () => void

    // 项目事件
    onItemClick?: (item: T, index: number) => void
    onItemLongPress?: (item: T, index: number) => void

    // 更新事件
    'onUpdate:scrollIntoView'?: (value: string) => void
}

declare interface VirtualListSlots<T = any> {
    default?: (props: {
        item: T,
        index: number
    }) => any

    topLoading?: (props: {
        status: LoadingStatus
    }) => any

    bottomLoading?: (props: {
        status: LoadingStatus
    }) => any

    backToTop?: () => any
}

declare interface VirtualListExposed<T = any> {
    // 滚动控制
    scrollToTop: () => void
    scrollToBottom: () => void
    scrollToItem: (index: number, options?: ScrollToItemOptions) => void
    scrollToIndex: (index: number, options?: ScrollToItemOptions) => void

    // 信息获取
    getVisibleRange: () => { start: number, end: number }
    getContainerHeight: () => number
    getScrollTop: () => number

    // 尺寸测量
    measureContainer: () => void
    getItemHeight: (item: T, index: number) => number

    // 数据操作
    updateData: (data: T[]) => void
    appendData: (data: T[]) => void
    prependData: (data: T[]) => void
    clearData: () => void

    // 状态控制
    startLoading: (type: 'top' | 'bottom') => void
    stopLoading: (type: 'top' | 'bottom') => void
    setLoadingStatus: (type: 'top' | 'bottom', status: LoadingStatus) => void
    refresh: () => void
}

declare interface _VirtualList {
    new(): {
        $props: AllowedComponentProps &
        VNodeProps &
        ComponentCustomProps &
        VirtualListProps

        $emit: VirtualListEmits
        $slots: VirtualListSlots

        // 暴露的方法
        scrollToTop: VirtualListExposed['scrollToTop']
        scrollToBottom: VirtualListExposed['scrollToBottom']
        scrollToItem: VirtualListExposed['scrollToItem']
        scrollToIndex: VirtualListExposed['scrollToIndex']
        getVisibleRange: VirtualListExposed['getVisibleRange']
        getContainerHeight: VirtualListExposed['getContainerHeight']
        getScrollTop: VirtualListExposed['getScrollTop']
        measureContainer: VirtualListExposed['measureContainer']
        getItemHeight: VirtualListExposed['getItemHeight']
        updateData: VirtualListExposed['updateData']
        appendData: VirtualListExposed['appendData']
        prependData: VirtualListExposed['prependData']
        clearData: VirtualListExposed['clearData']
        startLoading: VirtualListExposed['startLoading']
        stopLoading: VirtualListExposed['stopLoading']
        setLoadingStatus: VirtualListExposed['setLoadingStatus']
        refresh: VirtualListExposed['refresh']
    }
}

export declare const VirtualList: _VirtualList

// 默认导出
export default VirtualList

// 类型导出
export {
    type LoadingStatus,
    type ScrollAlign,
    type ScrollToItemOptions,
    type VirtualListProps,
    type VirtualListEmits,
    type VirtualListSlots,
    type VirtualListExposed
}