# LoadingPage 加载页 
该组件是一个页面级的加载效果,可以在页面初始化数据等场景使用,与骨架屏有相似之处。
# 平台兼容性
App(vue) | App(nvue) | H5 | 小程序 | VUE2 | VUE3 |
---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ |
# 基本使用
loading
属性为true
或false
,设置组件的显示或隐藏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 | - |