我目前正在使用 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() {
}
}
最佳答案
我注意到了同样的行为，并找出了导致它的原因。如果结果的第一页没有填满包装 UI 元素，那么 Vue Infinite Loading 将自动翻页，直到填满为止。当我没有放置足够的数据来填充第一个元素时，这会在初始加载时导致 2 个页面加载。我使用开发工具来减小 UI 的大小，直到初始加载填充元素，然后它按预期工作。希望这可以帮助!
关于javascript - 页面加载时Vue Infinite Loading多个请求问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44669544/