dingdong-mall/components/custom-bar/load-status-bar.vue

<template>
	<view>
		<view class="margin-bottom-lg margin-top-sm">
			<view v-if="hasMoreData" class="text-center bg-main-color padding-tb text-lg" @click="reqMoreData">
				<text class="margin-right-xs">查看更多</text>
				<text class="text-bold cuIcon-unfold"></text>
			</view>
			<view class="cu-load" :class="loadMoreStatus"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'load-status-bar',
		emits: ['loadMore'],
		data() {
			return {
				loadMoreStatus: '',
				hasMoreData: true
			}
		},
		methods: {
			showLoading() {
				this.loadMoreStatus = 'loading bg-main-color padding-tb text-lg';
				this.hasMoreData = false;
			},
			showLoadMore() {
				this.loadMoreStatus = '';
				this.hasMoreData = true;
			},
			showLoadOver() {
				this.loadMoreStatus = 'over bg-grey padding-tb text-lg';
				this.hasMoreData = false;
			},
			showLoadErr() {
				this.loadMoreStatus = 'erro bg-red padding-tb text-lg';
				this.hasMoreData = false;
			},
			reqMoreData() {
				this.$emit('loadMore')
			}
		},
	}
</script>

<style scoped>
	.cu-load {
	    display: block;
	    line-height: unset;
	    text-align: center;
	}
</style>