Ci2Order.vue/App/components/z-loading/z-loading.vue

<template>
	<view>
		<view class="loadmore-animate flex-n fac fjc" v-if="showLoading">
			<view class="circle mr-20"></view>
			加载更多
		</view>
		<view class="loadmore-nodata" v-else>
			<view v-if="length<total">
				下拉加载
			</view>
			<view v-else>
				没有更多了
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'z-loading',
		props:{
			showLoading:Boolean,
			length:{
				type:Number,
				value:0,
			},
			total:{
				type:Number,
				value:0,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loadmore-animate {
		font-size: 24rpx;
		text-align: center;
		line-height: 60rpx;
		color: #007AFF;

		.circle {
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			border: 6rpx dotted #007AFF;
			animation: rotateanimate .5s infinite;
		}
	}

	.loadmore-nodata {
		font-size: 24rpx;
		text-align: center;
		line-height: 80rpx;
		color: #eee;
	}

	@keyframes rotateanimate {
		0% {
			transform: rotate(90deg);
		}

		33% {
			transform: rotate(180deg);
		}

		66% {
			transform: rotate(270deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>