Support infinite scroll

[Nguyễn Tiến Linh]

Feature request

Need to support infinite scroll loading more items beside pagination option

What problem does this feature solve?

What does the proposed API look like?

How should this be implemented in your opinion?

Are you willing to work on this yourself?

[Douglas Magic]

<template>
    <div>
        <div class="ui-posts">
            <article v-for="(page, index) in pages" :key="page.key" class="ui-post"></article>
        </div>
        <div ref="bottomEl"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentIndex: 0,
            pages: []
        };
    },
    created() {
        this.pages = [...this.$pagination.pages];
    },
    mounted() {
        this.$nextTick(() => {
            this.observerAndLoadNext();
        });
    },
    methods: {
        observerAndLoadNext() {
            const io = new IntersectionObserver((e) => {
                if (!this.pages.length) {
                    return;
                }
                const [item] = e;
                if (item && item.intersectionRatio > 0) {
                    this.currentIndex++;
                    // todo:  Needs to be obtained from the configuration
                    const pageSize = 9;
                    const start = pageSize * this.currentIndex;
                    const end = pageSize * (this.currentIndex + 1);
                    const nextPages = this.$pagination._matchedPages.slice(start, end);
                    this.pages.push(...nextPages);
                    if (this.currentIndex >= this.$pagination._paginationPages.length) {
                        io.disconnect();
                    }
                }
            });
            io.observe(this.$refs.bottomEl);
        }
    }
};
</script>

This may be useful.