javascript - 页面加载时Vue Infinite Loading多个请求问题

Question

我目前正在使用 Vue Infinite Loading在我的 Laravel 应用程序上显示数据，我面临的问题是，当页面加载时，即使我没有滚动页面，它也会请求所有数据。据我了解，它应该只在我当前的滚动位于底部时发出请求。下面是我的代码。

<infinite-loading :on-infinite="onInfinite" spinner="spiral" ref="infiniteLoading">
    <span slot="no-more"></span>
</infinite-loading>



     import InfiniteLoading from 'vue-infinite-loading';

    export default {
            data: function(){
                return {
                    leagueLeaders: [],
                    playerStats: [],
                    pagination: 1,
                }
            },
            methods: {
                components: {
                    InfiniteLoading,
                },
                onInfinite() {
                    let self  = this;
                    axios.get(config.NBLAPI + config.API.PLAYERSTATS2, {
                        params: { 
                            page: self.pagination,
                        }
                    }).then( (response) => {
                        let data = response.data.data;
                        let lastpage = response.data.last_page;

                        if ( response.status == 200 && data.length > 0) {
                            self.leagueLeaders = self.leagueLeaders.concat(data);
                            self.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                            if(self.pagination <= lastpage){
                                self.pagination += 1;
                            }
                        }
                        else {
                            self.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                        }
                    });
                },
            },
            mounted: function() {

            }
}

Answer 1

我注意到了同样的行为，并找出了导致它的原因。如果结果的第一页没有填满包装 UI 元素，那么 Vue Infinite Loading 将自动翻页，直到填满为止。当我没有放置足够的数据来填充第一个元素时，这会在初始加载时导致 2 个页面加载。我使用开发工具来减小 UI 的大小，直到初始加载填充元素，然后它按预期工作。希望这可以帮助!