# mx-loading 加载
加载图标,用于表示加载中的过渡状态。
# 引入
在app.json或index.json中引入组件,详细介绍见快速上手
"usingComponents": {
"mx-loading": "/miniprogram_npm/m-ui/mx-loading/index"
}
# 小程序码
可使用微信扫码查看小程序码
#
# 代码演示
# 加载类型
<mx-loading /> <mx-loading type="spinner" />
# 自定义颜色
<mx-loading color="#1989fa" /> <mx-loading type="spinner" color="#1989fa" />
# 加载文案
<mx-loading size="24px">加载中...</mx-loading>
# 垂直排列
<mx-loading size="24px" vertical>加载中...</mx-loading>
# API
# Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
color | 颜色 | string | #c9c9c9 |
type | 类型,可选值为 spinner | string | circular |
size | 加载图标大小,默认单位为 px | string,number | 30px |
text-size | 文字大小,默认单位为为 px | string,number | 14px |
vertical | 是否垂直排列图标和文字内容 | boolean | false |
# slot
名称 | 说明 |
---|---|
- | 加载文案 |
# 外部样式类
名称 | 说明 |
---|---|
custom-class | 根节点样式 |