# bz-loading 加载
# 基本用法
loading 加载组件
扫码预览
用BoosHi扫码或PC端点击
<template>
<view class="demo-ui-page">
<view class="demo-content">
<view class="demo-title">bz-loading 加载</view>
<demo-cell>
<bz-loading class="mr-10" size="small"></bz-loading>
<bz-loading class="mr-10"></bz-loading>
<bz-loading class="mr-10" size="large"></bz-loading>
</demo-cell>
<demo-cell title="圆形">
<bz-loading class="mr-10" type="circle" size="small"></bz-loading>
<bz-loading class="mr-10" type="circle" size="medium"></bz-loading>
<bz-loading class="mr-10" type="circle" size="large"></bz-loading>
</demo-cell>
<demo-cell title="自定义颜色">
<bz-loading class="mr-10" color="red"></bz-loading>
<bz-loading class="mr-10" type="circle" color="red"></bz-loading>
</demo-cell>
<demo-cell title="文本">
<bz-loading class="mb-10" text="横向加载中..."></bz-loading>
<view>
<bz-loading type="circle" isVertical text="竖向加载中"></bz-loading>
</view>
</demo-cell>
</view>
</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
展开 刷新 关闭
# 属性说明
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|
| type | String | default | 'default', 'circle' | loading 的样式类型 |
| text | String | - | - | 文字文本 |
| color | String | #1890ff | - | 主题颜色 |
| size | String | medium | 'large', 'medium', 'small' | 文字大小 |
| isVertical | Boolean | false | - | 有文字时 是否垂直排列布局 |