1.在index.html引入mint-ui的依赖
<!-- mint-ui -->
<link rel="stylesheet" href="./css/mint-ui-style.css">
<script src="./js/mint-ui-index.js"></script>
2.在vue.config.js中
configureWebpack: {
externals: {
'mint-ui': 'MINT',
},
}
3.使用【!!!loadMore方法千万不要带参数,切记,切记,切记】
<style lang="scss" scoped>
.infiniteScrollDemo {
text-align: center;
.loading {
display: flex;
.loading-icon {
padding-top: 10px;
margin: 0 auto;
}
}
}
</style>
<template>
<div class="infiniteScrollDemo">
<ul v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="10"
class="page-infinite-list">
<li v-for="item in list"
class="page-infinite-listitem">{{ item }}</li>
</ul>
<div v-if="loading && !showEnd"
class="loading">
<div class="loading-icon">
<mt-spinner type="fading-circle"
color="#26a2ff"
class="loading-icon"></mt-spinner>
<div>加载中</div>
</div>
</div>
<div v-if="showEnd">我是有底线的</div>
</div>
</template>
<script>
import { InfiniteScroll, Spinner } from 'mint-ui';
export default {
data() {
return {
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
loading: false,
showEnd: false
};
},
name: 'infiniteScrollDemo',
methods: {
loadMore() {
this.loading = true;
if (this.list.length < 100) {
setTimeout(() => {
let last = this.list[this.list.length - 1];
for (let i = 1; i <= 10; i++) {
this.list.push(last + i);
}
this.loading = false;
}, 1000);
} else {
this.loading = false;
this.showEnd = true;
}
}
}
}
</script>