u-loadmore.vue 5.53 KB
Newer Older
baihong committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203
<template>
	<view class="u-load-more-wrap" :style="{
		backgroundColor: bgColor,
		marginBottom: marginBottom + 'rpx',
		marginTop: marginTop + 'rpx',
		height: $u.addUnit(height)
	}">
		<u-line color="#d4d4d4" length="50"></u-line>
		<!-- 加载中和没有更多的状态才显示两边的横线 -->
		<view :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner">
			<view class="u-loadmore-icon-wrap">
				<u-loading class="u-loadmore-icon" :color="iconColor" :mode="iconType == 'circle' ? 'circle' : 'flower'" :show="status == 'loading' && icon"></u-loading>
			</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>
		<u-line color="#d4d4d4" length="50"></u-line>
	</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.circleColor}`
				}
			},
			// 加载中花朵动画形式
			// 动画由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";
	
	/* #ifdef MP */
	// mp.scss中,赋予了u-lineflex: 1,这里需要一个明确的长度,所以重置掉它
	// 在组件内部,把组件名(u-line)当做选择器,在微信开发工具会提示不合法,但不影响使用
	u-line {
		flex: none;
	}
	/* #endif */
	
	.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;
	}
</style>