页面加载时Vue无限加载多个请求问题

Question

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

<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 无限加载将自动分页，直到填满为止。当我没有放置足够的数据来填充第一个页面的元素时，这会导致初始加载时加载 2 个页面。我使用开发工具来减小 UI 的大小，直到初始负载填满元素，然后它按预期工作。希望这可以帮助！