vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

feat(VInfiniteScroll): initial implementation

Open nekosaur opened this issue 2 years ago • 0 comments

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 and next 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)

nekosaur avatar Aug 07 '22 08:08 nekosaur