Skip to content

7 Virtual Scroll

David Grill edited this page Jun 2, 2017 · 2 revisions

VirtualScroll

If you need a virtual scroll, you can use InfiniteList class

<template>
  <div class="infinite" @scroll="handleScroll.scroll($event)" ref="infinite">
      <div v-for="(test, index) in infinite"> {{ test.caption }} {{ index }} </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { InfiniteList } from 'vue-idb'

export default {
  name: 'app',
  computed: {
    ...mapGetters({ infinite: 'getBigsInfinite' }),
  },
  data () {
    return {
      handleScroll: null
    }
  },
  mounted () {
    this.handleScroll = new InfiniteList(this.$refs.infinite, 'bigs', this.$store)
  },
  destroyed () {
    this.handleScroll.unset()
  }
}
</script>
Clone this wiki locally