<template>
<div style="background:#f6f6f6">
<lc-title title="无限加载"></lc-title>
<lc-infiniteloading @loadmore="onInfinite" :is-show-mod="true" :has-more="isHasMore" :is-loading="isLoading"
:threshold="200">
<ul class="list" >
<li class="list-item" v-for="(item, index) of dataScroll" :key="index">我是测试数据{{index + 1}}</li>
</ul>
</lc-infiniteloading>
</div>
</template>
<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
components: { LcTitle, Category },
data() {
return {
dataScroll: new Array(30),
page: 2,
num: 30,
isHasMore: true,
isLoading: false,
isErr: false,
timer: null
};
},
methods: {
onInfinite () {
this.isLoading = true;
this.timer = setTimeout(() => {
if (this.page <= 5) {
this.dataScroll = new Array(this.num * this.page);
this.page = this.page + 1;
} else {
this.isHasMore = false;
}
this.isLoading = false;
}, 100);
}
},
destroyed() {
clearTimeout(this.timer);
}
};
</script>
<style lang="less" scoped>
.list{
padding-top: 10px;
.list-item{
height: 50px;
border: 1px solid mix(#0785DB, #FFF, 40%);
margin-bottom: 10px;
font-size: 12px;
color: mix(#0785DB, #FFF, 80%);
line-height: 50px;
text-align: center;
background-color: #fff;
}
}
</style>
|
