TMSUI

# Loading 转圈圈

# 介绍

提示用户需要等待，提升事务过渡时的体验。

# 使用指南

# 一般用法

<tms-loading/>

# 底部显示提示文字

<tms-loading text="请稍候"/>

# 提示文字在右侧

<tms-loading horizon type="spinner" text="加载中"/>

# 修改大小颜色

<tms-loading iconSize="36" iconColor="green" textColor="green" text="加载中"/>

# 全屏加载

<button bind:tap="showGlobalLoading">全屏加载</button>
<tms-loading show="{{show}}" global text="加载中"/>

Component({
    data: {
        show: false,
    },
    methods: {
        showGlobalLoading() {
            this.setData({
                show: !this.data.show,
            });
        },
    }
})

# 使用slot

<tms-loading>
    <view>这是slot内容</view>
</tms-loading>

# API

属性 说明 类型 默认值 版本
horizon 提示文字是否横向 boolean false
show 控制显示或隐藏组件 boolean false
global 固定显示在全屏居中位置 boolean false
loading 显示按钮载入状态 boolean false
icon-size 设置元素宽度和高度 string ''
text 提示文字内容 string ''
icon-color loading元素的颜色 string ''
text-color 提示文字的颜色 string ''
type circle或者spinner两种样式 string 'circle'

# EVENTS

属性 说明 类型
bind:click-icon 点击loading图标事件 (event) => {}
bind:click-text 点击提示文字事件 (event) => {}

# CSS变量

// 主题色
--loading-icon-color: @system-color-normal;
// 圆环宽度
--loading-circle-width: 6rpx;
// loading 圆圈大小
--loading-icon-size: 60rpx;
// loading 文案颜色
--loading-text-color: rgba(0, 0, 0, .8);
// loading 文案字体大小
--loading-text-font-size: 32rpx;
// 全屏居中模式 背景色
--loading-global-background: rgba(76, 76, 76, .7);
// 全屏居中模式 主题色
--loading-global-icon-color: white;
// 全屏居中模式 圆圈大小
--loading-global-icon-size: 60rpx;
// 全屏居中模式 文案颜色
--loading-global-text-color: white;
// 全屏居中模式 文案字体大小
--loading-global-text-font-size: 32rpx;
// 全屏遮罩背景色
--loading-global-mask-background: transparent;
// 全屏遮罩层z-index
--loading-global-mask-z-index: 1050;
// 动画速度 变化一圈用时
--loading-animation-duration: .8s;

# FAQ

← Overlay 遮罩层 →