移动端触底加载刷新动画 (uni)

封装一个移动端触底加载刷新动画组件

需求：

1. 无数据时隐藏，
2. 触底时显示加载动画，
3. 无更多数据时，提示无更多数据（自适应父盒子大小，高性能）

代码

components/tr-TouchBottom

<!-- 触底加载更多 -->
<template>
	<view class="mescroll-upwarp" :style="{height: TouchBottom_heigth+'rpx',color:TextColor}"
		v-if="SoleType==1 || SoleType==2">
		<view v-if="SoleType==1" class="flex-row align-items-conter justify-content-conter"
			:style="{height: QuanSize+'rpx'}">
			<view v-if="iconType=='circle'" class="upwarp-progress mescroll-rotate"
				:style="{width: QuanSize+'rpx',height: QuanSize+'rpx'}">
			</view>
			<view v-else class="u-loading-flower" :style="{width: QuanSize+'rpx',height: QuanSize+'rpx'}">
			</view>
			<view class="upwarp-tip" :style="{fontSize:fontSize+'rpx'}">加载中...</view>
		</view>
		<view v-if="SoleType==2" class="flex-row align-items-conter justify-content-conter"
			:style="{height: QuanSize+'rpx'}">
			<tr-line :color='TextColor' :Line_width='H_Line_width'></tr-line>
			<view class="upwarp-nodata" :style="{fontSize:fontSize+'rpx'}">没有更多啦</view>
			<tr-line :color='TextColor' :Line_width='H_Line_width'></tr-line>
		</view>
	</view>
</template>

<script>
	/**
	 * tr-TouchBottom 加载更多
	 * @description 触底加载更多。
	 * @property {Number} SoleType 当前加载的状态 0不显示 1加载中 2没有更多 
	 * @property {String} iconType 动画类型  flower花朵状图标，circle圆圈状图标
	 * @property {String} fontSize 字体大小 单位rpx
	 * @property {String} H_Line_width 子组件横线的宽度  rpx
	 * @property {String} TextColor 所有字体颜色  （除iconType等于flower时的图标颜色）
	 * @example <tr-TouchBottom :SoleType=''></tr-TouchBottom>
	 */
	export default {
		name: 'tr-TouchBottom',
		props: {
			TouchBottom_heigth: { //底部加载更多高度   rpx
				type: Number,
				default: 90
			},
			// 横线宽度  单位rpx
			H_Line_width: {
				type: Number,
				default () {
					return 55 //rpx
				}
			},
			// 字体大小 图标会根据字体大小自适应  单位rpx
			fontSize: {
				type: String,
				default () {
					return '26' //rpx
				}
			},
			// 状态 单位 
			SoleType: {
				type: Number,
				default () {
					return 0
				}
			},
			// 所有字体颜色  （除iconType等于flower时的图标颜色）
			TextColor: {
				type: String,
				default () {
					return '#000000'
				}
			},
			// 加载中状态的图标，flower花朵状图标，circle圆圈状图标
			iconType: {
				type: String,
				default: 'flower'
			},
		},
		computed: {
			QuanSize() {
				if (this.iconType == 'circle') return parseInt(this.fontSize) + 1;
				if (this.iconType == 'flower') return parseInt(this.fontSize) + 12;
			}
		}
	}
</script>

<style scoped lang="scss">
	.upwarp-nodata {
		margin: 0;
		padding: 10rpx;
	}

	.mescroll-upwarp {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		clear: both;
	}

	.mescroll-upwarp .upwarp-tip,
	.mescroll-upwarp .upwarp-nodata {
		display: inline-block;
		vertical-align: middle;
	}

	.mescroll-upwarp .upwarp-progress {
		display: inline-block;
		border-radius: 50%;
		border: 2rpx solid gray;
		border-bottom-color: transparent !important;
		/*已在style设置border-color,此处需加 !important*/
		vertical-align: middle;
	}

	.mescroll-rotate {
		margin-right: 12rpx;
	}

	/* 旋转动画 */
	.mescroll-upwarp .mescroll-rotate {
		animation: mescrollUpRotate 0.6s linear infinite;
	}

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

		to {
			-webkit-transform: rotate(1turn);
			transform: rotate(1turn);
		}
	}

	@keyframes mescrollUpRotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.u-loading-flower {
		margin-right: 10rpx;
		display: inline-block;
		vertical-align: middle;
		-webkit-animation: a 1s steps(12) infinite;
		animation: u-flower 1s steps(12) infinite;
		background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
		background-size: 100%;
	}
</style>

注册

pages.json

"easycom": {
		"^tr-(.*)": "@/components/tr-$1/tr-$1.vue"
	},

使用

<tr-TouchBottom :SoleType='SoleType'></tr-TouchBottom>

onReachBottom() {
			if (this.pages >= this.total / this.size) {
				this.SoleType = 2;
				return false;
			}
			this.SoleType = 1;
			this.pages++;
			this.gettodayRecommend();   
		}

效果图

自适应父盒子大小，居中
组件还可以进一步优化，想改的可以自己改哦