uni-app实现加载公用组件的封装

App启动时可以根据业务需求添加加载进入~~，下面自己封装一个可全局使用的加载组件。

创建组件：components/view-loader.vue

<template>
	<view>
		<view class="fidex-loang" v-if="myloader">
			<view class="jiazai-view">
				<image class="loang-jiazai" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577526765025&di=0ffa7fc92e51564c527cb3fa82ff4e5f&imgtype=0&src=http%3A%2F%2Fhbimg.huabanimg.com%2F23907369b8a233f4b426d739875621c6b0fc248a1d28c-8V4M0p_fw658"></image>
				<image class="loand-logo" src="/static/logo.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "view-loader",
		 props:["myloader"],
	}
</script>

<style lang='scss'>
	.fidex-loang{
		position: fixed;
		top: 0;
		left: 0;
		background: #fbfbfb;
		z-index: 10000000000;
		width: 100%;
		height: 100%;
		display: flex;
		    align-items: center;
		    justify-content: center;
	}
	.jiazai-view{
		position:relative;
	}
	.fidex-loang .loand-logo{
		position:absolute;
		top:150rpx;
		left:150rpx;
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
	}
	.fidex-loang .loang-jiazai{
		
		width:400rpx;
		height:400rpx;
	}
</style>

全局注册：main.js

import viewLoader from './components/view-loader.vue';
Vue.component('view-loader',viewLoader);

实例应用：

<template>
	<view >
		<view-loader :myloader ="myloader"></view-loader>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myloader:true
			}
		},
		onLoad() {

		},
		methods: {
			myloaderTimeout(){
				var clearMyloaderTimeout = setTimeout(function(){
						that.myloader =true;
				},1000);
				return clearMyloaderTimeout;
			},
			
			fneleiindezz(index,id){
				var that = this;
				//实际调用中请与ajax返回为准
				// let returnclear = that.myloaderTimeout();
				this.fneleiindez = index;
				// console.log(id)
				if(id!=null){
					this.$ajax({
						url: '/product/getTbProductTypeList.do',
						data: {
							"parentId":id,
						},
						success: function(res) {
							// console.log(returnclear)
							// window.clearTimeout(returnclear);
							that.myloader =false;
							var list = res.data.list;
							that.zhuantop = list;
							that.list = [];
							that.noMore =false;
							that.curPage = 1;
							that.scrollTop();
							that.id = id;
							that.getproduct(id)
						}
					});
				}
			}

		}
	}
</script>

<style>
	
</style>

效果预览：