参考:https://blog.csdn.net/sinat_40257787/article/details/79582130
问题一:下拉不会触发loadMore事件
解决:我们的ul或者设置滚动的元素必须设置高度和溢出滚动的属性因为我的接口没有分页所以用slice模拟数据分页加载
CSS代码:
.newsList {
max-height: 100vh;//与屏幕一样高度
overflow-y: auto;
}
HTML代码:
<ul
v-infinite-scroll="loadMore"
infinite-scroll-disabled="isMoreLoading"
infinite-scroll-distance="10"
:infinite-scroll-immediate-check="true"
class="newsList">
<li v-for="(item,index) in newsList">{{item}}</li>
</ul>
<div class="loading-box tc" v-if="isLoading">
<mt-spinner type="snake" class="loading-more"></mt-spinner>
<span class="loading-more-txt">加载中...</span>
</div>
<div class="no-more" v-if="noMore">没有更多了~</div>
JS代码:
data() {
return {
newsList : [],
moreList : [],
i : 0,
isMoreLoading: false, // 加载更多中
isLoading : false,
noMore : false
}
}
开始的时候加载前五条数据
created() {
var _vm = this;
let i = 0;
_vm.axios.post().then(function(response) {
console.log(response.data);
_vm.newsList = response.data.slice(i * 5 , (i + 1) * 5);
}).catch(function(error) {
console.info(error)
});
}
后面每次下拉触发loadMore事件,并再次加载五条数据,直到所有数据加载完毕
loadMore() {
this.isMoreLoading = true;
this.isLoading = true;
this.noMore = false;
setTimeout(() => {
var _vm = this;
_vm.axios.post().then(function(response) {
console.log(response.data);
_vm.i ++;
_vm.moreList = response.data.slice(_vm.i * 5 , (_vm.i + 1) * 5);
if(_vm.moreList.length == 0){
_vm.noMore = true;
_vm.isLoading = false;
}else{
_vm.isLoading = false;
_vm.moreList.forEach(function(item){
_vm.newsList.push(item);
})
}
}).catch(function(error) {
console.info(error)
});
this.noMore = false;
this.isMoreLoading = false;
}, 1000);
}