# mx-loading-page 加载页
在页面加载过程响应过度中的提示。
# 引入
在app.json或index.json中引入组件,详细介绍见快速上手
"usingComponents": {
"mx-loading-page": "/miniprogram_npm/m-ui/mx-loading-page/index"
}
# 小程序码
可使用微信扫码查看小程序码
#
# 代码演示
# 显示或隐藏
loading可以指定是否显示加载页
<mx-loading-page loading="{{true}}"></mx-loading-page>
# 文字内容
loading-text可以指定提示内容。
<mx-loading-page loading-text="loading..."></mx-loading-page>
# 动画模式
loading-mode可以指定加载动画的模式, 默认为circular
<mx-loading-page loading-mode="spinner"></mx-loading-page>
# 动画图片
image可以指定文字上方用于替换loading动画的图片
<mx-loading-page image="/static/logo.png"></mx-loading-page>
# 文字颜色
color可以指定文字颜色
<mx-loading-page color="#666"></mx-loading-page>
# 文字大小
font-size可以指定文字大小
<mx-loading-page font-size="24"></mx-loading-page>
# 图标大小
icon-size可以指定图标大小
<mx-loading-page icon-size="36"></mx-loading-page>
# 背景颜色
bg-color可以指定文字大小
<mx-loading-page bg-color="#e8e8e8"></mx-loading-page>
# 图标颜色
loading-color可以指定加载中图标的颜色
<mx-loading-page loading-color="#000000"></mx-loading-page>
# API
# Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
loadingText | 提示内容 | string,number | 正在加载 |
image | 文字上方用于替换loading动画的图片 | string | - |
loadingMode | 加载动画的模式,可选值为 spinner,circular | string | circular |
loading | 是否加载中 | boolean | false |
bgColor | 背景颜色 | string | #fff |
color | 文字颜色 | string | #C8C8C8 |
fontSize | 文字大小 | string,number | 19 |
iconSize | 图标大小 | string,number | 28 |
loadingColor | 加载中图标的颜色 | string | #C8C8C8 |