# LoadingPage 加载页

组件名:uv-loading-page

点击下载&安装 (opens new window)

该组件是一个页面级的加载效果,可以在页面初始化数据等场景使用,与骨架屏有相似之处。

# 平台兼容性

App(vue) App(nvue) H5 小程序 VUE2 VUE3

# 基本使用

  • loading属性为truefalse,设置组件的显示或隐藏
  • loading-text属性,设置提示文字
  • font-size属性,设置提示大小
<template>
	<uv-loading-page :loading="true" loading-text="加载中..." font-size="24rpx"></uv-loading-page>
</template>

# 动画模式

loading-mode可以指定加载动画的模式,circle为圆圈的形状,semicircle为半圆圈的形状,spinner为经典类似花朵的形状, 默认为circle

<template>
	<uv-loading-page :loading="true" loading-mode="spinner"></uv-loading-page>
</template>
<template>
	<uv-loading-page :loading="true" loading-mode="semicircle"></uv-loading-page>
</template>

# 动画图片

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

<template>
	<uv-loading-page :loading="true" image="https://www.uvui.cn/common/logo.png"></uv-loading-page>
</template>

# 图标大小

icon-size可以指定图标大小

<template>
	<uv-loading-page :loading="true" icon-size="50rpx"></uv-loading-page>
</template>

# API


# LoadingPage Props

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