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

Question

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

<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

通过删除父元素上的overflow:hidden;解决了此问题

Answer 2

我注意到了同样的行为，并弄清楚了是什么导致了我这一端。如果结果的第一页没有填满包装UI元素，那么Vue无限加载将自动分页，直到填满为止。当我没有放入足够的数据来填充第一个元素时，这会在初始加载时导致2个页面加载。我使用开发工具来减小UI的大小，直到初始加载填满了元素，然后它就可以按预期工作了。希望这能有所帮助！