# Loading 加载

概述

Loading 加载,一般在数据未加载完成之前显示。

# 引入

以下介绍两种常用的引入方式。
第一种:在页面json文件中引入
{
  "navigationBarTitleText": "加载中",
  "usingComponents": {
    "fui-loading":"/components/firstui/fui-loading/fui-loading"
  }
}
1
2
3
4
5
6
第二种:在根目录app.json文件中全局引入
"usingComponents": {
    "fui-loading":"components/firstui/fui-loading/fui-loading"
  }
1
2
3

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档API。
基础使用

通过 isFixed 属性设置loading是否固定在屏幕中间显示。

<fui-loading isFixed="{{false}}"></fui-loading>
1
type=row

通过 type 属性设置图标与文字水平排列还是垂直排列,默认为col。

<fui-loading type="row" isFixed="{{false}}"></fui-loading>
1

# Slots

插槽名称 说明
- -

# Props

属性名 类型 说明 默认值 其他说明
type String 类型,排列方式,可取值:col、row col -
text String 提示文字 加载中 -
colColor String 文本颜色,type=col时生效 #FFFFFF -
rowColor String 文本颜色,type=row时生效 #7F7F7F -
size Number, String 字体大小,单位rpx 26 -
backgroundColor String loading背景色,type=col时生效 rgba(0, 0, 0, 0.6) -
srcCol String loading icon图片地址,type=col时生效 base64... -
srcRow String loading icon图片地址,type=row时生效 base64... -
isFixed Boolean 是否固定在屏幕中间显示 true -
isMask Boolean 是否需要遮罩 false isFixed为true时生效
maskBgColor V1.9.9+ String 遮罩的背景色,默认透明色,isFixed为true时生效 transparent -

# Events

事件名 说明 回调参数
- - -

示例预览

Last Updated: 10/7/2023, 12:14:41 PM