【備忘録】Nuxt.jsで無限スクロール

 
vue-infinite-loadingを使って無限スクロール

• yarn add vue-infinite-loading
• plugin/infiniteloading.js

        import Vue from 'vue'
        import InfiniteLoading from 'vue-infinite-loading'
        Vue.component('infinite-loading', InfiniteLoading)

• nuxt.config.js
  plugins: [{ src: '~/plugins/infiniteloading', ssr: false }]

• vue
  <template>
  

  <div class="infinite-scroll">

  <ul class="infinite-scroll-list">

  <li class="infinite-scroll-list-item" v-for="i in this.count" :key="i">scroll {{ i }}</li>

  </ul>

  <infinite-loading

  ref="infiniteLoading"

  spinner="spiral"

  @infinite="infiniteHandler">

  <div slot="no-results"/>

  </infinite-loading>

  </div>

  </template>
  <script>
  

  export default {

  name: 'InfiniteScroll',

  data() {

  return {

  count: 20

  }

  },

  methods: {

  infiniteHandler() {

  setTimeout(() => {

  this.count += 20

  this.$refs.infiniteLoading.stateChanger.loaded()

  }, 1000)

  }

  }

  }

  </script>

https://qiita.com/yakiniku0220/items/1b2e960a09a9f085820e