审查视图

node_modules/uview-ui/components/u-loadmore/u-loadmore.vue 4.2 KB
韩昌 authored
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
<template>
	<view
	    class="u-loadmore"
	    :style="[
			$u.addStyle(customStyle),
			{
				backgroundColor: bgColor,
				marginBottom: $u.addUnit(marginBottom),
				marginTop: $u.addUnit(marginTop),
				height: $u.addUnit(height),
			},
		]"
	>
		<u-line
		    length="140rpx"
		    color="#E6E8EB"
		    :hairline="false"
			v-if="line"
		></u-line>
		<!-- 加载中和没有更多的状态才显示两边的横线 -->
		<view
		    :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''"
		    class="u-loadmore__content"
		>
			<view
			    class="u-loadmore__content__icon-wrap"
			    v-if="status === 'loading' && icon"
			>
				<u-loading-icon
				    :color="iconColor"
				    size="17"
				    :mode="loadingIcon"
				></u-loading-icon>
			</view>
			<!-- 如果没有更多的状态下,显示内容为dot(粗点),加载特定样式 -->
			<text
			    class="u-line-1"
			    :style="[loadTextStyle]"
			    :class="[(status == 'nomore' && isDot == true) ? 'u-loadmore__content__dot-text' : 'u-loadmore__content__text']"
			    @tap="loadMore"
			>{{ showText }}</text>
		</view>
		<u-line
		    length="140rpx"
		    color="#E6E8EB"
			:hairline="false"
			v-if="line"
		></u-line>
	</view>
</template>

<script>
	import props from './props.js';

	/**
	 * loadmore 加载更多
	 * @description 此组件一般用于标识页面底部加载数据时的状态。
	 * @tutorial https://www.uviewui.com/components/loadMore.html
	 * @property {String}			status			组件状态(默认 'loadmore' )
	 * @property {String}			bgColor			组件背景颜色,在页面是非白色时会用到(默认 'transparent' )
	 * @property {Boolean}			icon			加载中时是否显示图标(默认 true )
	 * @property {String | Number}	fontSize		字体大小(默认 14 )
	 * @property {String}			color			字体颜色(默认 '#606266' )
	 * @property {String}			loadingIcon		加载图标(默认 'circle' )
	 * @property {String}			loadmoreText	加载前的提示语(默认 '加载更多' )
	 * @property {String}			loadingText		加载中提示语(默认 '正在加载...' )
	 * @property {String}			nomoreText		没有更多的提示语(默认 '没有更多了' )
	 * @property {Boolean}			isDot			到上一个相邻元素的距离 (默认 false )
	 * @property {String}			iconColor		加载中图标的颜色 (默认 '#b7b7b7' )
	 * @property {String | Number}	marginTop		上边距 (默认 10 )
	 * @property {String | Number}	marginBottom	下边距 (默认 10 )
	 * @property {String | Number}	height			高度,单位px (默认 'auto' )
	 * @property {Boolean}			line			是否显示左边分割线  (默认 false )
	 * @event {Function} loadmore status为loadmore时,点击组件会发出此事件
	 * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
	 */
	export default {
		name: "u-loadmore",
		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
		data() {
			return {
				// 粗点
				dotText: "●"
			}
		},
		computed: {
			// 加载的文字显示的样式
			loadTextStyle() {
				return {
					color: this.color,
					fontSize: uni.$u.addUnit(this.fontSize),
					lineHeight: uni.$u.addUnit(this.fontSize),
					backgroundColor: this.bgColor,
				}
			},
			// 显示的提示文字
			showText() {
				let text = '';
				if (this.status == 'loadmore') text = this.loadmoreText
				else if (this.status == 'loading') text = this.loadingText
				else if (this.status == 'nomore' && this.isDot) text = this.dotText;
				else text = this.nomoreText;
				return text;
			}
		},
		methods: {
			loadMore() {
				// 只有在“加载更多”的状态下才发送点击事件,内容不满一屏时无法触发底部上拉事件,所以需要点击来触发
				if (this.status == 'loadmore') this.$emit('loadmore');
			}
		}
	}
</script>

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

	.u-loadmore {
		@include flex(row);
		align-items: center;
		justify-content: center;
		flex: 1;

		&__content {
			margin: 0 15px;
			@include flex(row);
			align-items: center;
			justify-content: center;

			&__icon-wrap {
				margin-right: 8px;
			}

			&__text {
				font-size: 14px;
				color: $u-content-color;
			}

			&__dot-text {
				font-size: 15px;
				color: $u-tips-color;
			}
		}
	}
</style>