vue.js - 无限滚动到下一页

Question

我正在尝试使用 vue、vue-infinite-scroll 和看板进行无限滚动以更改页面。这里的问题是当滚动条到达内容的末尾时将所有其他页面一起返回，这是我的代码

methods: {
scrollLoad(status) {
            this.busy = true;
            const infiniteScroll = $(".drag-column-" + status);
            
            infiniteScroll.on("scroll", () => {
                // detect end of div scroll
                    if (
                        infiniteScroll[0].scrollTop +
                            infiniteScroll[0].clientHeight >=
                        infiniteScroll[0].scrollHeight - 4
                    ) {
                    this.current_page ++;
                    axios.get(URL + '?page='+this.current_page)
                    .then(res => {
                      this.blocks.push(res.data)
                      this.busy = false;
                    }
                    .catch(err => {
                    console.log(err)
                    })
                    )
                 }
            });
        },
}

<kanban-board :stages="stages" :blocks="blocksClone" @update-block="updateBlock" :config="config">
<div v-for="(block, index) in blocks" :slot="block.id" :key="block.title" v-infinite-scroll="scrollLoad(block.status)" infinite-scroll-disabled="busy" infinite-scroll-distance="20">
<div>{{block.name}}</div>
</div>
</kanban-board>

标签： vue.jsinfinite-scroll

Answer 1

我这样解决了我的问题：

methods: {
scrollLoad(status) {
            this.busy = true;
            const infiniteScroll = $(".drag-column-" + status);
            
            infiniteScroll.on("scroll", () => {
                // detect end of div scroll
                    if (
                        infiniteScroll[0].scrollTop +
                            infiniteScroll[0].clientHeight >=
                        infiniteScroll[0].scrollHeight - 4
                    ) {
                    this.current_page ++;
                    axios.get(URL + '?page='+this.current_page)
                    .then(res => {
                      this.blocks.push(res.data)
                      this.busy = false;
                      this.current_page = this.res.meta.current_page
                    }
                    .catch(err => {
                    console.log(err)
                    })
                    )
                 }
            });
        },
}