MoeNovaClient/uni_modules/cl-uni/components/cl-loadmore/cl-loadmore.vue

<template>
	<view class="cl-loadmore__wrap">
		<cl-divider :background-color="backgroundColor" :color="color" :width="divider ? '400rpx' : '0rpx'">
			<view class="cl-loadmore">
				<cl-loading :color="iconColor" :theme="loadingTheme" :size="20" v-if="!finish && loading"></cl-loading>
				<text class="cl-loadmore__text" :style="{
						color,
					}" v-if="message">{{ message }}</text>
			</view>
		</cl-divider>
	</view>
</template>

<script>
	/**
	 * loadmore 加载更多
	 * @description 加载更多
	 * @tutorial https://docs.cool-js.com/uni/components/operate/loadmore.html
	 * @property {Object} loading 是否加载中
	 * @property {Boolean} finish 是否加载完成
	 * @property {Boolean} divider 是否显示分割符，默认true
	 * @property {String} color 字体颜色，默认#666
	 * @property {String} iconColor 图标颜色
	 * @property {String} backgroundColor 背景颜色，默认#f7f7f7
	 * @property {String} text 普通状态下显示内容，默认“上拉加载更多”
	 * @property {String} loadingText 加载中显示内容，默认“加载中”
	 * @property {String} loadingTheme 加载图标主题
	 * @property {String} finishText 加载完成显示内容，默认“没有更多了”
	 * @example <cl-loadmore :loading="true" />
	 */

	export default {
		name: "cl-loadmore",

		props: {
			// 是否加载中
			loading: Boolean,
			// 是否加载完成
			finish: Boolean,
			// 是否显示分割符
			divider: {
				type: Boolean,
				default: true,
			},
			// 字体颜色
			color: {
				type: String,
				default: "#666",
			},
			// 图标颜色
			iconColor: String,
			// 背景颜色
			backgroundColor: {
				type: String,
				default: "#f7f7f7",
			},
			// 普通状态下显示内容
			text: {
				type: String,
				default: "上拉加载更多",
			},
			// 加载中显示内容
			loadingText: {
				type: String,
				default: "加载中",
			},
			// 加载图标主题
			loadingTheme: String,
			// 加载完成显示内容
			finishText: {
				type: String,
				default: "没有更多了!!!!!!!!!!!!!!",
			},
		},

		computed: {
			message() {
				return this.finish ? this.finishText : this.loading ? this.loadingText : this.text;
			},
		},
	};
</script>