<template lang="html">
<div class="main">
<div class='list-box'>
<ul v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-immediate-check="true"
infinite-scroll-distance="40">
<li v-for="(item ,index) in list" :key="index">
{{item.title}}
</li>
</ul>
<!--显示加载中状态-->
<div class="loading-box" v-if="loading">
<mt-spinner type="fading-circle" class="loading-more" color="#0188fd"></mt-spinner>
</div>
<div class="no-more" v-if="noMore">亲,已经到底了哦!</div>
</div>
</div>
</template>
<script>
import { InfiniteScroll , Spinner } from 'mint-ui';
export default {
components: {
'mt-spinner':Spinner,
},
data() {
return {
list: [],
pagesNum: 1,//总页数
loading: false, // 加载中转圈
noMore: false, // 是否还有更多
endTime: "",
page: {
access_token: this.$route.query.access_token,
planId: this.$route.query.id,
pageNumber: 1,
pageSize: 20,
}
}
},
created() {
this.initData();
},
mounted() {
},
methods: {
initData: function(type) {
this.loading = true
axios.get("xxx", {
params: this.page
})
.then((data) => {
if (type === 'loadMore') {
this.list = this.list.concat(data.data.data.list);
} else {
this.list = data.data.data.list;
}
// 设置分页
this.pagesNum = data.data.data.pages; //总页数
this.loading = false;
})
.catch(function(err) {
console.log(err);
})
},
loadMore:function() {
this.page.pageNumber += 1 // 增加分页
this.loading = true // 加载中
if(this.page.pageNumber <= this.pagesNum){
//加载数据
setTimeout(()=>{
this.initData('loadMore')
},200)
}else{
this.noMore = true // 显示没有更多了
this.loading = false // 关闭加载中
return false
}
}
}
}
</script>
<style>
.list-box {
max-height:calc(100% - 1.8rem); //必须有高度
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.list-box ul{
width:100%;
}
.list-box ul li{
width: 100%;
height: 0.55rem;
@include flexbox();
@include justify-content(space-between);
border-bottom: 1px solid #e4e4e4;
}
</style>