# tui-loading 加载动画

介绍

加载中,用于请求时等待展示。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiLoading from "@/components/thorui/tui-loading/tui-loading"
export default {
	components:{
		tuiLoading
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 升级中 升级中 升级中 升级中

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-loading": "/components/thorui/tui-loading/tui-loading"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

基础用法

默认居中展示,可通过 fixed 属性控制是否居中展示。

隐藏loading可自行使用v-if或者wx:if控制

<tui-loading></tui-loading>
横向排列

通过 type 属性控制loading图标与文本的排列方式。

<tui-loading type="row"></tui-loading>

# Slots

none

# Props

参数 类型 说明 默认值
type String loading图标与文本的排列方式:column ,row column
text String 加载显示文本 加载中
color String 文本颜色,type=column时生效 #fff
backgroundColor String 加载框背景色,type=column时生效 rgba(0, 0, 0, 0.6)
src String loading图标地址或base64,type=column时生效 data:image/png;base64,...
rowsrc String loading图标地址或base64,type=row时生效 data:image/png;base64,...
fixed Boolean 加载loading是否居中显示 true

# Events

none

# 预览

请以移动端效果为准,touch事件目前尚未完全在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码