Loading Icon 加载图标
用于展示加载状态的图标组件，支持多种加载动画效果。nvue设置类型任何都是一种效果
代码示例
<template>
<zk-theme type="page" :padding="30" showBack navbarTitle="加载旋转动画">
<!-- 基础用法 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" />
<view class="demo-row">
<view class="demo-item">
<!-- nvue中只支持一种选中动画 -->
<zk-loading-icon type="circle" />
</view>
<view class="demo-item">
<zk-loading-icon type="spinner" />
</view>
<view class="demo-item">
<zk-loading-icon type="dot" />
</view>
</view>
</zk-theme>
<!-- 自定义颜色 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义颜色" />
<view class="demo-row">
<view class="demo-item">
<zk-loading-icon type="circle" color="#1989fa" />
</view>
<view class="demo-item">
<zk-loading-icon type="spinner" color="#1989fa" />
</view>
<view class="demo-item">
<zk-loading-icon type="dot" color="#1989fa" />
</view>
</view>
</zk-theme>
<!-- 自定义大小 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义大小" />
<view class="demo-row">
<view class="demo-item">
<zk-loading-icon :size="24" />
</view>
<view class="demo-item">
<zk-loading-icon :size="36" type="spinner" />
</view>
<view class="demo-item">
<zk-loading-icon :size="48" type="dot" />
</view>
</view>
</zk-theme>
<!-- 加载文案 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="加载文案" />
<view class="demo-row">
<view class="demo-item">
<zk-loading-icon type="circle" text="加载中..." />
</view>
<view class="demo-item">
<zk-loading-icon type="spinner" text="加载中..." />
</view>
<view class="demo-item">
<zk-loading-icon type="dot" text="加载中..." />
</view>
</view>
</zk-theme>
<!-- 垂直排列 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="垂直排列" />
<view class="demo-row">
<view class="demo-item">
<zk-loading-icon type="circle" text="加载中..." vertical />
</view>
<view class="demo-item">
<zk-loading-icon type="spinner" text="加载中..." vertical />
</view>
<view class="demo-item">
<zk-loading-icon type="dot" text="加载中..." vertical />
</view>
</view>
</zk-theme>
<!-- 自定义文字颜色和大小 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义文字颜色和大小" />
<view class="demo-row">
<view class="demo-item">
<zk-loading-icon text="加载中..." text-color="#1989fa" :text-size="32" />
</view>
</view>
</zk-theme>
<!-- 自定义动画时长 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义动画时长" />
<view class="demo-row">
<view class="demo-item">
<zk-loading-icon :duration="1200" />
</view>
<view class="demo-item">
<zk-loading-icon type="spinner" :duration="1200" />
</view>
<view class="demo-item">
<zk-loading-icon type="dot" :duration="1200" />
</view>
</view>
</zk-theme>
</zk-theme>
</template>
<style lang="scss">
.demo-row {
/* #ifdef APP-NVUE */
flex-direction: row;
/* #endif */
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-wrap: wrap;
align-items: center;
margin: -10rpx;
}
.demo-item {
/* #ifdef APP-NVUE */
flex-direction: row;
/* #endif */
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
justify-content: center;
padding: 10rpx;
flex: 0 0 33.3333%;
box-sizing: border-box;
}
/* #ifndef APP-NVUE */
.demo-item {
min-height: 100rpx;
}
/* #endif */
</style>
API
Props 属性
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
是否必填 |
| type |
加载图标类型 |
string |
circle / spinner / dot |
circle |
否 |
| size |
加载图标大小，单位rpx |
string / number |
- |
30 |
否 |
| color |
加载图标颜色 |
string |
- |
主题色 |
否 |
| textSize |
文字大小，单位rpx |
string / number |
- |
28 |
否 |
| textColor |
文字颜色 |
string |
- |
主题色 |
否 |
| text |
文字内容 |
string |
- |
- |
否 |
| borderWidth |
边框宽度，单位rpx |
string / number |
- |
3 |
否 |
| duration |
动画时长，单位ms |
string / number |
- |
800 |
否 |
| vertical |
是否垂直排列 |
boolean |
true / false |
false |
否 |
Slots 插槽