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>

效果预览：