groupon-wx/uview-ui/components/u-loadmore/u-loadmore.vue

<template>
	<view
		class="u-load-more-wrap"
		:style="{
			backgroundColor: bgColor,
			marginBottom: marginBottom + 'rpx',
			marginTop: marginTop + 'rpx',
			height: $u.addUnit(height)
		}"
	>
		<view class="u-line"></view>
		<!-- 加载中和没有更多的状态才显示两边的横线 -->
		<view :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner">
			<view class="u-loadmore-icon-wrap"><view v-if="status == 'loading' && icon" class=" u-loadmore-iconu-loading u-loading-circle" :style="[cricleStyle]"></view></view>
			<!-- 如果没有更多的状态下，显示内容为dot（粗点），加载特定样式 -->
			<view class="u-line-1" :style="[loadTextStyle]" :class="[status == 'nomore' && isDot == true ? 'u-dot-text' : 'u-more-text']" @tap="loadMore">{{ showText }}</view>
		</view>
		<view class="u-line"></view>
	</view>
</template>

<script>
/**
 * loadmore 加载更多
 * @description 此组件一般用于标识页面底部加载数据时的状态。
 * @tutorial https://www.uviewui.com/components/loadMore.html
 * @property {String} status 组件状态（默认loadmore）
 * @property {String} bg-color 组件背景颜色，在页面是非白色时会用到（默认#ffffff）
 * @property {Boolean} icon 加载中时是否显示图标（默认true）
 * @property {String} icon-type 加载中时的图标类型（默认circle）
 * @property {String} icon-color icon-type为circle时有效，加载中的动画图标的颜色（默认#b7b7b7）
 * @property {Boolean} is-dot status为nomore时，内容显示为一个"●"（默认false）
 * @property {String} color 字体颜色（默认#606266）
 * @property {String Number} margin-top 到上一个相邻元素的距离
 * @property {String Number} margin-bottom 到下一个相邻元素的距离
 * @property {Object} load-text 自定义显示的文字，见上方说明示例
 * @event {Function} loadmore status为loadmore时，点击组件会发出此事件
 * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
 */
export default {
	name: 'u-loadmore',
	props: {
		// 组件背景色
		bgColor: {
			type: String,
			default: 'transparent'
		},
		// 是否显示加载中的图标
		icon: {
			type: Boolean,
			default: true
		},
		// 字体大小
		fontSize: {
			type: String,
			default: '28'
		},
		// 字体颜色
		color: {
			type: String,
			default: '#606266'
		},
		// 组件状态，loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
		status: {
			type: String,
			default: 'loadmore'
		},
		// 加载中状态的图标，flower-花朵状图标，circle-圆圈状图标
		iconType: {
			type: String,
			default: 'circle'
		},
		// 显示的文字
		loadText: {
			type: Object,
			default() {
				return {
					loadmore: '加载更多',
					loading: '正在加载...',
					nomore: '没有更多了'
				};
			}
		},
		// 在“没有更多”状态下，是否显示粗点
		isDot: {
			type: Boolean,
			default: false
		},
		// 加载中显示圆圈动画时，动画的颜色
		iconColor: {
			type: String,
			default: '#b7b7b7'
		},
		// 上边距
		marginTop: {
			type: [String, Number],
			default: 0
		},
		// 下边距
		marginBottom: {
			type: [String, Number],
			default: 0
		},
		// 高度，单位rpx
		height: {
			type: [String, Number],
			default: 'auto'
		}
	},
	data() {
		return {
			// 粗点
			dotText: '●'
		};
	},
	computed: {
		// 加载的文字显示的样式
		loadTextStyle() {
			return {
				color: this.color,
				fontSize: this.fontSize + 'rpx',
				position: 'relative',
				zIndex: 1,
				backgroundColor: this.bgColor
				// 如果是加载中状态，动画和文字需要距离近一点
			};
		},
		// 加载中圆圈动画的样式
		cricleStyle() {
			return {
				borderColor: `#e5e5e5 #e5e5e5 #e5e5e5 ${this.iconColor}`
			};
		},
		// 加载中花朵动画形式
		// 动画由base64图片生成，暂不支持修改
		flowerStyle() {
			return {};
		},
		// 显示的提示文字
		showText() {
			let text = '';
			if (this.status == 'loadmore') text = this.loadText.loadmore;
			else if (this.status == 'loading') text = this.loadText.loading;
			else if (this.status == 'nomore' && this.isDot) text = this.dotText;
			else text = this.loadText.nomore;
			return text;
		}
	},
	methods: {
		loadMore() {
			// 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
			if (this.status == 'loadmore') this.$emit('loadmore');
		}
	}
};
</script>

<style scoped lang="scss">
@import '../../libs/css/style.components.scss';


.u-line {
	vertical-align: middle;
	// 此处采用兼容分开写，兼容nvue的写法
	width: 50rpx;
	border-bottom: 1px solid rgb(204, 204, 204);
	transform: scaleY(0.5);
}
.u-load-more-wrap {
	@include vue-flex;
	justify-content: center;
	align-items: center;
}

.u-load-more-inner {
	@include vue-flex;
	justify-content: center;
	align-items: center;
	padding: 0 12rpx;
}

.u-more {
	position: relative;
	@include vue-flex;
	justify-content: center;
}

.u-dot-text {
	font-size: 28rpx;
}

.u-loadmore-icon-wrap {
	margin-right: 8rpx;
}

.u-loadmore-icon {
	@include vue-flex;
	align-items: center;
	justify-content: center;
}
.u-loading-circle {
	/* #ifndef APP-NVUE */
	display: inline-flex;
	/* #endif */
	vertical-align: middle;
	width: 28rpx;
	height: 28rpx;
	background: 0 0;
	border-radius: 50%;
	border: 2px solid;
	border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
	animation: u-circle 1s linear infinite;
	width: 34rpx;
	height: 34rpx;
	border-color: #e4e4e4 #e4e4e4 #e4e4e4 #c7c7c7;
}

@-webkit-keyframes u-circle {
	0% {
		transform: rotate(0);
	}

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