- Notifications
You must be signed in to change notification settings - Fork34
一个支持百万数量级的Vue3无限滚动列表组件
tnfe/vue3-infinite-list
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
English |简体中文
A short and powerful infinite scroll list library for vue, with zero dependencies 💪
- Tiny & dependency free – Only 3kb gzipped
- Render millions of items, without breaking a sweat
- Scroll to index orset the initial scroll offset
- Supports fixed orvariable heights/widths
- Vertical orHorizontal lists
see full examples on thisdemo.
Usingnpm:
npm install vue3-infinite-list --saveUsingyarn:
yarn add vue3-infinite-listimportInfiniteListfrom'vue3-infinite-list';
<InfiniteList:data="data":width="'100%'":height="500":itemSize="50":debug="debug"v-slot="{ item, index }"><divclass="li-con">{{ index + 1 }} : {{ item }}</div></InfiniteList>
The default direction isvertical
<InfiniteList:data="data":width="'100%'":height="500":itemSize="50":debug="debug"v-slot="{ item, index }"><divclass="li-con">{{ index + 1 }} : {{ item }}</div></InfiniteList>
The default direction isvertical
<InfiniteList:data="data":width="900":height="220":itemSize="115"scrollDirection="horizontal":debug="debug"v-slot="{ item, index }"><divclass="li-con li-con-r"> item{{ index }}<br/> xxxxxxx<br/> xxxxxxx<br/><el-buttontype="primary"round>Primary</el-button></div></InfiniteList>
<InfiniteList:data="data":width="'100%'":height="520":itemSize="getItemSize":debug="debug"v-slot="{ item, index }"><divclass="li-con">item {{ index }} : {{ item }}</div></InfiniteList>
wheregetItemSize is a function with it's signature as :(i: number): number, with this you can dynamic set your item height.
<InfiniteList:data="data":width="'100%'":height="500":itemSize="getItemSize":scrollToIndex="scrollToIndex":debug="debug"v-slot="{ item, index }"><divclass="li-con":class="getClass(index)">item{{ index + 1 }} : {{ item }}</div></InfiniteList>
you can also use propscrollToIndex to scroll to special index。
<InfiniteList:data="data":width="'100%'":height="500":itemSize="getItemSize":scrollToIndex="scrollToIndex":scrollToAlignment="scrollToAlignment":debug="debug"v-slot="{ item, index }"><divclass="li-con":class="getClass(index)">item{{ index + 1 }} : {{ item }}</div></InfiniteList>
you can also use propscrollToIndex withscrollToAlignment to special how the item align to the container, which has four value:auto,start,center,end。
<InfiniteList:data="data":width="'100%'":height="500":itemSize="90":scrollOffset="scrollOffset":debug="debug"v-slot="{ item, index }"><el-rowclass="mb-4 li-con"><el-col:span="8">index: {{ index + 1 }}</el-col><el-col:span="8">xxxxxxxxxx</el-col><el-col:span="8"><el-buttontype="primary">Primary</el-button><el-buttontype="success">Success</el-button></el-col></el-row></InfiniteList>
you can also use propscrollOffset to scroll to special offset。
<InfiniteList:data="data":width="'100%'":height="500":itemSize="60":debug="debug"v-slot="{ item, index }"><el-rowclass="li-con"><el-col:span="6">item{{ index + 1 }}</el-col><el-col:span="6">2022-05-01</el-col><el-col:span="6">Name: Tom</el-col><el-col:span="6"><el-buttontype="primary">Button</el-button><el-buttontype="success">Button</el-button></el-col></el-row></InfiniteList>
just change the binddata dynamic.
<InfiniteList:data="data":width="'100%'":height="500":itemSize="60":debug="debug"v-slot="{ item, index }":overscanCount="2"><el-rowclass="li-con"><el-col:span="6">item{{ index + 1 }}</el-col><el-col:span="6">2022-05-01</el-col><el-col:span="6">Name: Tom</el-col><el-col:span="6"><el-buttontype="primary">Button</el-button><el-buttontype="success">Button</el-button></el-col></el-row></InfiniteList>
Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices.
| Property | Type | Required? | Description |
|---|---|---|---|
| width | Number or String* | ✓ | Width of List. This property will determine the number of rendered items when scrollDirection is'horizontal'. |
| height | Number or String* | ✓ | Height of List. This property will determine the number of rendered items when scrollDirection is'vertical'. |
| data | any[] | ✓ | The data that builds the templates within the Infinite scroll. |
| itemSize | (index: number): number | Either a fixed height/width (depending on the scrollDirection), an array containing the heights of all the items in your list, or a function that returns the height of an item given its index:(index: number): number | |
| scrollDirection | String | Whether the list should scroll vertically or horizontally. One of'vertical' (default) or'horizontal'. | |
| scrollOffset | Number | Can be used to control the scroll offset; Also useful for setting an initial scroll offset | |
| scrollToIndex | Number | Item index to scroll to (by forcefully scrolling if necessary) | |
| scrollToAlignment | String | Used in combination withscrollToIndex, this prop controls the alignment of the scrolled to item. One of:'start','center','end' or'auto'. Use'start' to always align items to the top of the container and'end' to align them bottom. Use'center' to align them in the middle of the container.'auto' scrolls the least amount possible to ensure that the specifiedscrollToIndex item is fully visible. | |
| overscanCount | Number | Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices. |
* Width may only be a string whenscrollDirection is'vertical'. Similarly, Height may only be a string ifscrollDirection is'horizontal'
Found an issue? Pleasereport it along with any relevant details to reproduce it.
This library is transplanted fromreact-tiny-virtual-list andreact-virtualized.Thanks for the great works of authorClaudéric Demers ❤️
is available under the MIT License.
About
一个支持百万数量级的Vue3无限滚动列表组件
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.