# 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