# LoadingPage 加载页
# 平台差异说明
App(vue) | App(nvue) | H5 | 小程序 |
---|---|---|---|
√ | √ | √ | √ |
# 基本使用
<template>
<view>
<zx-loading-page></zx-loading-page>
</view>
</template>
# 显示或隐藏
loading
可以指定是否显示加载页
<zx-loading-page :loading="true"></zx-loading-page>
# 文字内容
loading-text
可以指定提示内容
<zx-loading-page loading-text="loading..."></zx-loading-page>
# 动画模式
loading-mode
可以指定加载动画的模式, 默认为circle
<zx-loading-page loading-mode="spinner"></zx-loading-page>
<zx-loading-page loading-mode="semicircle"></zx-loading-page>
# 动画图片
image
可以指定文字上方用于替换loading动画的图片
<zx-loading-page image="/static/logo.png"></zx-loading-page>
# 文字颜色
color
可以指定文字颜色
<zx-loading-page color="#666"></zx-loading-page>
# 文字大小
font-size
可以指定文字大小
<zx-loading-page font-size="24"></zx-loading-page>
# 图标大小 2.0.32
icon-size
可以指定图标大小
<zx-loading-page icon-size="36"></zx-loading-page>
# 背景颜色
bg-color
可以指定文字大小
<zx-loading-page bg-color="#e8e8e8"></zx-loading-page>
# 图标颜色
loading-color
可以指定加载中图标的颜色
<zx-loading-page loading-color="#000000"></zx-loading-page>
# API
# Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
loadingText | 提示内容 | String | Number | 正在加载 | - |
image | 文字上方用于替换loading动画的图片 | String | - | - |
loadingMode | 加载动画的模式 | String | circle | spinner \ semicircle |
loading | 是否加载中 | boolean | false | true |
bgColor | 背景颜色 | String | #ffffff | - |
color | 文字颜色 | String | #C8C8C8 | - |
fontSize | 文字大小 | String | Number | 19 | - |
iconSize 2.0.32 | 图标大小 | String | Number | 28 | - |
loadingColor | 加载中图标的颜色 | String | #C8C8C8 | - |