uniapp 自定义加载组件,全屏加载,局部加载 （微信小程序）

效果图

全屏加载  页面加载使用

局部加载   列表加载里面使用

使用gif

html 

<template>
	<view>
		<view class="" v-if="type=='FullScreen'">
			<view class="loading" v-if="show">
				<view class="">
					<image class="loadingicon"
						src="../../static/all/loading.gif"
						mode="aspectFit"></image>
					<view style="color:#999;width: 100%;">加载中</view>
				</view>
			</view>
		</view>
		<view class="" v-if="type=='adaptive'">
			<view class="loading_adaptive" v-if="show">
				<view class="">
					<image class="loadingicon"
						src="../../static/all/loading.gif"
						mode="aspectFit"></image>
					<view style="color:#999;width: 100%;">加载中</view>
				</view>
			</view>
		</view>
	</view>
</template>

css

	.loading {
		width: 100vw;
		height: 100vh;
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999;
		text-align: center;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;

		.loadingicon {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.loading_adaptive {
		width: 100%;
		height: 500rpx;
		z-index: 999999;
		text-align: center;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;

		.loadingicon {
			width: 100rpx;
			height: 100rpx;
		}
	}

js

	export default {
		name: "loading",
		data() {
			return {

			};
		},
		props: {
			show: {
				default: false,
				type: Boolean
			},
			type: {
				default: 'FullScreen', //全屏使用或者自适应使用
				type: String
			}
		},
		watch: {
			show: {
				handler(newData, oldData) {
					console.log(newData, '新值');
					console.log(oldData, '老值');
				},
				immediate: true,
				deep: true
			}
		}
	}

挂载全局或页面引入使用

需要放在最外层view

		<loading :show="loadingshow"></loading>

js

loadingshow: true,



//在生命周期 例如：onload 或者 接口请求里面使用
//时间可以自定义
//第一种方式在生命周期中使用：
	setTimeout(() => {
		that.loadingshow = false;
	}, 200)

//第二种方式在接口里面使用：
	            需要展示数据的接口({
					page: this.page,
					limit: this.limit
				}).then(ress => {
                //数据请求完毕再关闭加载
				if(res.code==1){
                that.loadingshow = false;
                }
				})