RemoteList

Docs

RemoteList

支持滚动加载的虚拟列表

Feature

处理了indexRange转pageIndex&pageSize的逻辑
list大小自适应父容器

Installation

npx @meta-carbon/mc-ui@latest add remote-list

Usage

import RemoteList from '@/components/ui/remote-list'

<RemoteList fetchPage={} itemRender={} list={[]} total={null} />

Examples（不同的demo好像会共享一个组件实例？）

gird-default(3)

gird-5

nextImage

~~需要添加height-calc缓存来防止在向上滚动时因重复measure导致的定位抖动~~ 定位抖动原因是，Next Image 没有设置正确的width&height，导致cell卸载/加载时NextImage预占的尺寸和cache中不一致；

 
 
  const measureCache = useRef<Map<Key, Set<number>>>(new Map());
 
  ...
 
  onLoad={() => {
    const renderHeight =
      imgShellRefList.current[index]?.getBoundingClientRect().height;
    if (!renderHeight) return;
    if (measureCache.current.get(key)?.has(renderHeight)) return;
    const prevSet = measureCache.current.get(key) || new Set();
    prevSet.add(renderHeight);
    measureCache.current.set(key, prevSet);
    updateMeasure?.();
  }}

左侧为添加了cache的list，右侧未添加

McUpload paragraph-render