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>

效果预览:
在这里插入图片描述
在这里插入图片描述

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值