全屏加载

组件介绍

uXui 全屏加载组件 ( ux-page-loading ) 可以遮住页面，并在居中位置展示 Loading 动画，利用遮罩层还可以隐藏数据渲染过程产生的页面抖动，您可以在各类加载场景使用它。

运行图示

组件属性

组件插槽

组件具有一个默认插槽，位于加载圆点下方，可以利用插槽添加自定义元素。

组件方法

open : 打开动画
close : 关闭动画

演示代码

说明 : 代码中演示了 uni-app x ref 用法，详情请参考 :

https://uniapp.dcloud.net.cn/uni-app-x/component/#callmethod

<template>
	<view class="ux-body ux-flex1 ux-page-color">
		<text class="ux-h6 ux-color-grey ux-mt-large">全屏加载</text>
		<view class="ux-demo ux-mt">
			<text 
			@tap="openLoading" 
			style="padding:10rpx;" 
			class="ux-text ux-color-primary ux-text-center">点击这里打开加载动画</text>
		</view>
		<ux-page-loading ref="loading">
			<text 
			style="margin-top:6rpx;" 
			class="ux-text-small ux-color-grey3 ux-italic"> loading ...</text>
		</ux-page-loading>
	</view>
</template>
<script lang="uts">
export default {
	data() {
		return {
			
		}
	},
	methods: {
		openLoading : function(){
			var loadingRef = this.$refs['loading'] as UxPageLoadingComponentPublicInstance;
			loadingRef.open();
			// 延迟3秒钟关闭
			setTimeout(()=>{
				loadingRef.close();
			}, 3000)
		}
	},
	mounted:function(){
		this.openLoading();
	}
}
</script>
<style scoped>
</style>