Loading加载

引入

{
  "usingComponents": {
    "x-loading":"waft-ui/assembly/loading/loading"
  }
}

代码示例

<x-loading text="加载中" loading="{{ loading3 }}" vertical="{{ true }}" size="{{ 80 }}" full="{{ true }}"></x-loading>

效果展示

组件样式

html

<view class="loading">
  <x-nav-bar showArrow="{{true}}" title="测试 loading 组件"></x-nav-bar>
  <view class="content">
    <view class="title">水平 loading</view>
    <view style="height: 150rpx;width: 50vw;border:1rpx solid red">
      <x-loading text="加载中" loading="{{ loading1 }}"></x-loading>
    </view>
    <view class="title">垂直 loading</view>
    <view style="height: 150rpx;width: 50vw;border:1rpx solid red"> 
      <x-loading text="加载中" loading="{{ loading2 }}" vertical="{{ true }}" size="{{ 60 }}"></x-loading>
    </view>
    <view class="btn" onTap="onLoading">点击开启全屏 loading</view>
    <x-loading text="加载中" loading="{{ loading3 }}" vertical="{{ true }}" size="{{ 80 }}" full="{{ true }}"></x-loading>
  </view>
</view>

TS

import { Props, Page, Event, console } from 'waft';
import { JSONObject } from 'waft-json';


export class TestLoading extends Page {
  loading: boolean = false;
  constructor(props: Props) {
    super(props);
  }

  onLoading(e: Event): void{
    const state = new JSONObject();
    this.loading = !this.loading;
    state.set('loading3', this.loading);
    console.log('====#### 即将改变 loading 状态 = ' + state.toString());
    this.setState(state);
  }
}

css

.title {
    font-size: 20rpx;
    color: #2b3852;
    margin-bottom: 10rpx;
}
.btn {
    padding: 10rpx 20rpx;
    border-radius: 6rpx;
    background-color: #00b3ff;
    color: #E6F2FF;
    margin-top: 40rpx;
}

.loading{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content:flex-start;
    align-items: center;
    flex-direction: column;
    background-color: #F0F2F7;
}
.content{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
}

API

• props | 参数 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | | loading | 是否 loading 状态 | boolean | false | | full | 是否全屏 loading | boolean | false | | size | loading 图标大小 | number | 30 | | text | loading 文字 | string | | | textSize | loading 文字大小 | number | 22 | | textColor | loading 文字颜色 | string | #7383a2 | | vertical | 是否垂直排列文案 | boolean | false |