外观

本页目录

全屏加载 ​

提示

  1. 全屏 Loading 组件可以遮住页面，并在居中位置展示 Loading 动画，您可以在各类加载场景是使用它。
  2. page-panel 页面组件内置了此组件，可以利用 page 组件的 isLoading 属性控制动画展示|关闭。
  3. nvue 端使用 BindingX 实现 Loading 动画。

样式修改 ​

  • 您可以通过修改皮肤样式comm.scss来修改 page-loading 组件的遮罩背景及动画圆点样式 ：
  • 页面内置全屏 Loading 背景颜色 .page-loading-bg{background-color:rgba(255,255,255,0.88);}
  • 页面内置全屏圆点颜色 Loading 颜色 .page-loading-color{background-color:#4E86F7;}

演示代码 ​

vue
<template>
		<view> 
			<view class="px-12" 
			style="margin-top:100rpx;" 
			@tap="openLoading">
				点击打开 Loading 动画
			</view>
			<view class="">
				<page-loading ref="pageloading"></page-loading>
			</view>
		</view>
	</template>
	<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			openLoading:function(){
				this.$refs.pageloading.open();
				// 延迟2秒关闭
				setTimeout(()=>{
					this.$refs.pageloading.close();
				},8000);
			}
		},
		onReady:function(){
			this.$refs.pageloading.open();
			// 延迟2秒关闭
			setTimeout(()=>{
				this.$refs.pageloading.close();
			},2000);
		}
	}
	</script>

method ​

方法说明
open()打开 Loading 动画
close()关闭 Loading 动画

在 GitHub 上编辑此页

上次更新: