uniap上拉加载样式的实现

上拉加载样式实现

//调用组件
<me-scroll @goods="getgoods" :upLoadType="upLoadType">
//内容，要遍历的数据等...
</me-scroll>
<script>
getgoods(e){
			if(e.data){
				this.page += 1
				this.lecturerSpecial(this.page)
			}
		}
</script>

//组件
<template>
	<view class="folt">
		<scroll-view scroll-y="true" class="scroll-Y"
			@scrolltolower="lower" @scroll="scroll">
			<view class="">
				<slot></slot><!-- 插槽 -->
				<view v-if="showupwarp" class="mescroll-upwarp" style="background:#ffffff;color:#ccc">
					<view class="upwarp" v-show="upLoadType===1">
						<!-- <view class="upwarp-progress mescroll-rotate" style="border-color:#eeeeee"></view> -->
						<image class="tp" src="../../static/image/loading-2.png" mode=""></image>
						<view class="upwarp-tip">
							加载中...
						</view>
					</view>
					<view v-if="upLoadType===2" class="upwarp-nodata">
						没有更多了~
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
export default {
	components: {
	},
		data() {
			return {
				// upLoadType:0,
				goods: [], //列表数据
				tabs: ['全部', '奶粉', '面膜', '图书'],
				tabIndex: 0, // tab下标
				 // 列表总数量
				totalNum: 60,
				//  页码 默认1开始
				curPageNum: 1,
				showupwarp:true,
				// 列表数组
				projectList: [],
			};
		},
		props:{
			upLoadType:{//1加载中//2没有更多了
				type:Number,
				default:0,
			}
		},
		onLoad() {

		},
		methods: {
			scroll(e){
				// console.log(e)
			},
			lower(){
				this.showupwarp = true
				let data={}
				if(this.upLoadType==2){
					data.data=false
					this.$emit('goods',data)
				}else{
					data.data=true
					this.$emit('goods',data)
				}
				// this.showupwarp = true
				// // if(this.upLoadType==2){
				// 	this.upLoadType = 1//加载
				// 	console.log("加载更多")
					setTimeout(() => {
						this.showupwarp = false
						// 数据请求完成后隐藏加载框
						// this.upLoadType = 2//无更多
					}, 1500);
				// // }
			},
		}
	};
</script>
<style>
.scroll-Y {
	height: 500px;
}

.mescroll-upwarp{
	height: 40px;
	padding-bottom: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.mescroll-upwarp .upwarp{
	display: flex;
	justify-content: center;
}
.mescroll-upwarp image{
	width: 35px;
	height: 35px;
}
.upwarp-tip{
	font-size: 25px;
}
@Keyframes donut-spin {
   0% {
     transform: rotate(0deg);
   }
 
   100% {
     transform: rotate(360deg);
   }
}
 
.tp {
   animation: donut-spin 1s linear infinite;
}
</style>