基本使用

<template>
	<view>
		<un-loading-page></un-loading-page>
	</view>
</template>

显示或隐藏

loading可以指定是否显示加载页

<un-loading-page :loading="true"></un-loading-page>

文字内容

loading-text可以指定提示内容

<un-loading-page loading-text="loading..."></un-loading-page>

动画模式

loading-mode可以指定加载动画的模式, 默认为circle

<un-loading-page loading-mode="spinner"></un-loading-page>
<un-loading-page loading-mode="semicircle"></un-loading-page>

动画图片

image可以指定文字上方用于替换loading动画的图片

<un-loading-page image="/static/logo.png"></un-loading-page>

文字颜色

color可以指定文字颜色

<un-loading-page color="#666"></un-loading-page>

文字大小

font-size可以指定文字大小

<un-loading-page font-size="24"></un-loading-page>

图标大小

icon-size可以指定图标大小

<un-loading-page icon-size="36"></un-loading-page>

背景颜色

bg-color可以指定背景颜色

<un-loading-page bg-color="#e8e8e8"></un-loading-page>

图标颜色

loading-color可以指定加载中图标的颜色

<un-loading-page loading-color="#000000"></un-loading-page>

API

Props

参数	说明	类型	默认值
loadingText	提示内容	String | Number	正在加载
image	文字上方用于替换loading动画的图片	String	-
loadingMode	加载动画的模式	Enum	circle
loading	是否加载中	boolean	false
bgColor	背景颜色	String	#ffffff
color	文字颜色	String	#C8C8C8
fontSize	文字大小	String | Number	19
iconSize	图标大小	String | Number	28
loadingColor	加载中图标的颜色	String	#C8C8C8

Scss 变量

变量名	默认值	说明
$un-loading-page-wrapper-margin-top	-150px	加载页面包装器上边距
$un-loading-page-icon-margin-bottom	10px	加载页面图标下边距
$un-loading-page-img-width	40px	加载页面图片宽度
$un-loading-page-img-height	40px	加载页面图片高度
$un-loading-page-text-font-size	$text-xl	加载页面文字大小
$un-loading-page-text-color	$text-color-muted	加载页面文字颜色

提示

组件内部默认使用 scss 变量，如需修改，请查看 scss 变量使用 文档