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">
  <!-- <view class="title">横向 loading</view> -->
  <x-nav-bar showArrow="{{true}}" title="测试 loading 组件"></x-nav-bar>
  <view class="content">
    <view style="height: 100rpx;"> </view>
    <x-loading text="加载中" loading="{{ loading1 }}"></x-loading>
    <!-- <view class="title">垂直 loading</view> -->
    <view style="height: 100rpx;"> </view>
    <x-loading text="加载中" loading="{{ loading2 }}" vertical="{{ true }}" size="{{ 60 }}"></x-loading>
    <!-- <view class="btn" onClick="loading">点击开启全屏 loading</view> -->
    <x-loading text="加载中" loading="{{ loading3 }}" vertical="{{ true }}" size="{{ 80 }}" full="{{ true }}"></x-loading>
  </view>
</view>

css

.title {
    font-size: 26rpx;
    color: #2b3852;
    font-weight: bold;
}
.btn {
    padding: 10rpx 20rpx;
    border-radius: 6rpx;
    background-color: #00b3ff;
    color: #E6F2FF;
}
.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 |