2021年3月10日水曜日

【備忘録】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

0 件のコメント:

コメントを投稿