# Loading 加载

概述

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

# 支持平台

App-vue App-Nvue 微信小程序 支付宝小程序 钉钉小程序 百度小程序 字节小程序 QQ小程序 H5/PC

温馨提示

一般来说我们会通过 z-index + position 来进行层级的设置,但是 weex (Nvue)不支持 z-index 设置层级关系,默认越靠后的元素层级越高。

# 引入

以下介绍两种常用的引入方式。
第一种:在页面中引用、注册
import fuiLoading from "@/components/firstui/fui-loading/fui-loading.vue"
export default {
	components:{
		fuiLoading
	}
}
1
2
3
4
5
6
第二种:easycom组件规范
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手

如果不了解easycom,可先查看 官网文档 (opens new window)

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档API(以下示例写于.vue页面中)。
基础使用

通过 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 非nvue端有效,nvue默认带遮罩,isFixed为true时生效

# Events

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

示例预览

# 示例代码地址

FirstUILoading 加载
Last Updated: 9/29/2022, 1:07:59 AM