vue virtual scroller

해피데빙·2022년 11월 24일
0

DynamicScroller
: component that wraps the RecycleScroller component and extends its features to include dynamic size management. The main use case for this is when you do not know the size of the items in advance. The Dynamic Scroller automatically "discovers" item dimensions as it renders new items during scrolling.

DynamicScrollerItem
: must wrap each item in a DynamicScroller to handle size computations.

DynamicScrollerItem


The component that should wrap all the items in a DynamicScroller.

Props

  • item (required): the item rendered in the scroller.

  • active (required): holding view active in RecycleScroller. Will prevent unnecessary size recomputation.

  • sizeDependencies: values that can affect the size of the item. This prop will be watched and if one value changes, the size will be recomputed. Recommended instead of watchData.

  • watchData (default: false): deeply watch item for changes to re-calculate the size (not recommended, can impact performance).

  • tag (default: 'div'): element used to render the component.

  • emitResize (default: false): emit the resize event each time the size is recomputed (can impact performance).

Events
resize: emitted each time the size is recomputed, only if emitResize prop is true.

is

  • component :is 렌더링할 실제 컴포넌트를 :is="컴포넌트 이름"식으로 넘겨준다
  • is 속성을 사용하는 경우 다시 돌아왔을 때 계속해서 재렌더링 되어 기존의 클릭값이나 기존 데이터가 유지되지 않는다. 그래서 처음 생성된 컴포넌트 인스턴스가 캐시되기를 원하는 경우에 keep-alive 엘리먼트로 감싼다
profile
노션 : https://garrulous-gander-3f2.notion.site/c488d337791c4c4cb6d93cb9fcc26f17

0개의 댓글