基于 react-virtuoso, 做了部分扩展及性能提升。

在线Demo: virtuoso.dev

• https://virtuoso.dev/ 网站

变更说明

定义变更

export type TScrollingInfo = {
  isScrolling: boolean,
  scrollingTop: number
}

export type TDefaultPosInfo = {
  top: number                        // scrollTop 值
  left: number                       // scrollLeft 值
  index: number                      // 指定索引位置的item渲染
  maybeRenderItemCount: number       // 要渲染展示的item数量
}

export interface VirtuosoProps {
  totalCount: number
  overscan?: number
  topItems?: number
  footer?: () => ReactElement
  item: (index: number) => ReactElement
  computeItemKey?: (index: number) => number
  itemHeight?: number
  startReached?: ({touchMoveDistance, scrollTop}:{touchMoveDistance: number, scrollTop:number}) => void // 新增下拉检测
  endReached?: (index: number) => void
  scrollEventChange?: (e: Event) => void  // 新增
  scrollingStateChange?: (info: TScrollingInfo) => void // 变更
  quickScrollingStateChange?: (isRunning: boolean) => void // 新增
  itemsRendered?: TSubscriber<ListItem[]>
  itemsLastRendered?: TSubscriber<ListItem[]> // 新增
  totalListHeightChanged?: TSubscriber<number>
  style?: CSSProperties
  className?: string
  initialItemCount?: number
  initialScrollToPos?: TDefaultPosInfo // 新增
  ScrollContainer?: TScrollContainer
  FooterContainer?: TFooterContainer
  ListContainer?: TListContainer
  ItemContainer?: TItemContainer
}

参见：https://virtuoso.dev/virtuoso-api-reference/

接口函数：scrollToIndex

interface TScrollLocationWithAlign {
  index: number
  align: 'start' | 'center' | 'end'
}
export type TScrollLocation = number | TScrollLocationWithAlign

// 滑动/滚动到索引项
function scrollToIndex(location: TScrollLocation);

接口函数：scrollToPos

type ScrollBehavior = "auto" | "smooth";
interface ScrollOptions {
    behavior?: ScrollBehavior;
}

interface ScrollToOptions extends ScrollOptions {
    left?: number;
    top?: number;
}

// 滑动/滚动到坐标
function scrollToPos(location: ScrollToOptions)
注意: 使用scrollToPos会根据behavior的行为来处理滑动及滚动的效果。处理完成后，恢复初始的style状态

性能提升

• 区分ScrollTo与普通的Scroll监听，提高渲染速度
• 优化事件传递，提高部分核心监听对象的处理能力
• 优化滑动效果为smooth值的行为

作者

sunzhifeng @sunzhifeng

版权

MIT