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;}})