vuetify
vuetify copied to clipboard
feat(VInfiniteScroll): initial implementation
closes #3538
Description
infinite scroll implementation
Motivation and Context
requested feature. also needed internally by date picker
How Has This Been Tested?
playground and cypress
Markup:
<template>
<v-infinite-scroll
:load="load"
height="400"
>
<template v-for="(item, index) in items" :key="item">
<div :class="['pa-2', index % 2 === 0 ? 'bg-grey-lighten-2' : '']">
Item #{{ item }}
</div>
</template>
</v-infinite-scroll>
</template>
<script>
export default {
data: () => ({
items: Array.from({ length: 100 }, (k, v) => v + 1),
}),
methods: {
load () {
return new Promise(resolve => {
setTimeout(() => {
this.items.push(...Array.from({ length: 10 }, (k, v) => v + this.items.at(-1) + 1))
resolve('ok')
}, 1000)
})
},
},
}
</script>
Types of changes
- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)
Checklist:
- [x] The PR title is no longer than 64 characters.
- [x] The PR is submitted to the correct branch (
master
for bug fixes and documentation updates,dev
for new features and backwards compatible changes andnext
for non-backwards compatible changes). - [x] My code follows the code style of this project.
- [x] I've added relevant changes to the documentation (applies to new features and breaking changes in core library)