1.封装组件ScrollPageLoading.vue
<template>
<div>
<div style="text-align: center;margin-bottom: 10px">
<a-spin v-if="loading" :spinning="loading" tip="正在加载,请稍后..."></a-spin>
<span class="noData" v-else-if="current >= pages">没有更多数据</span>
<span class="noData" v-else>下滑加载更多</span>
</div>
</div>
</template>
<script>
export default {
name: 'ScrollPageLoading',
props: {
loading: {
type: Boolean,
required: true
},
current: {
type: Number,
required: true
},
pages: {
type: Number,
required: true
}
}
}
</script>
<style scoped>
.noData {
text-align: center;
color: rgb(157, 167, 173);
font-size: 16px;
margin-bottom: 10px;
}
</style>