Vue Long List
High performance long list for Vue.js (Currently only Vue.js@1.x).
- Support multiple items per line.
- Support scroll on y/x axis.
- Currently only support all items are at uniform size.
Example
import {LongList, LongListItem} from 'vue-long-list'
export default {
components: {LongList, LongListItem},
props: {
listData: {
type: Array,
required: true,
},
},
data () {
return {
listRenderStart: 0,
listRenderLength: 10,
}
},
}
<long-list
mode="uniform"
:length="listData.length"
:render-start.sync="listRenderStart"
:render-length.sync="listRenderLength"
>
<!--
<long-list-item> should be the only children of <long-list>.
For better performance, track by id from item data if exist, otherwise by the
index of whole list, instead of by the index of `limitBy` filter's iteration
which always count index from 0 even when `listRenderStart` is not 0.
-->
<long-list-item
v-for="itemData in listData | limitBy listRenderLength listRenderStart"
:track-by="listRenderStart + $index"
>
<!--
Render item data as you want.
There is no any DOM element of <long-list-item>, only `.item` elements
provided by you, so you can style each item as you want.
-->
<div class="item">
{{itemData}}
</div>
</long-list-item>
</long-list>
Runnable Examples
- Clone this repo
npm install
npm run examples
- open
dist-examples/index.html
by browser