---
title: 加载
date: 2023-05-28 15:20:38
permalink: /pages/basics/loading
article: false
---

在需要设置加载的元素加上 class 类名 `cu-load`，可以设置自己喜欢的背景颜色 `.bg-red|...`

加载状态 `loading` 正在加载中，`over` 加载完成，`erro` 加载失败

> css
```
.cu-load loading  加载中
.cu-load over     加载结束
.cu-load erro     加载错误
.cu-load loading load-cuIcon  只有加载图标没有文字
```
因此 `loading、over、erro`，可以动态设置配合使用

加载的文案，是固定的，如需设置，复制 `main.css` 里的样式在当前文件改动即可

> 演示代码
```vue
<!-- 动态设置加载状态 -->
<view class="cu-load bg-grey" :class="!isLoad?'loading':'over'"></view>
<!-- 加载错误 -->
<view class="cu-load bg-red erro"></view>
<!-- 预览框，可以看到自定义顶部导航栏右侧有加载转动 -->
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">加载</block>
    <block slot="right">
        <view class="action">
            <view class="cu-load load-cuIcon" :class="!isLoad?'loading':'over'"></view>
        </view>
    </block>
</cu-custom>
```

## 弹窗加载

父容器加上 class 类名 `cu-load load-modal`，且用变量控制弹窗的显示与隐藏，父容器里面的内容，既是弹窗中间的内容

可以在弹窗里面放文字、带颜色的图标、静态图片等

> 演示代码
```vue
<view class="cu-load load-modal" v-if="loadModal">
    <!-- <view class="cuIcon-emojifill text-orange"></view> -->
    <image src="/static/logo.png" mode="aspectFit"></image>
    <view class="gray-text">加载中...</view>
</view>
```

## 进度条加载

父容器加上 class 类名 `load-progress show|hide`，动态变量控制 class `show 和 hide`，动态 style 设置距离顶部的高度 `top: 高度px`

容器里第一个就是加载的进度条，需要加上 class `load-progress-bar bg-green|...`，通过动态 style，控制进度

容器里第二个就是右侧的加载圆圈，需要加上 class `load-progress-spinner text-green|...`

> 演示代码
```vue
<view class="cu-bar bg-white margin-top">
    <view class="action">
        <text class="cuIcon-title text-blue"></text>进度条加载
    </view>
    <view class="action">
        <button class="cu-btn bg-green shadow" @tap="LoadProgress">
            点我
        </button>
    </view>
</view>
<view class="load-progress" :class="loadProgress!=0?'show':'hide'" :style="[{top:CustomBar+'px'}]">
    <view class="load-progress-bar bg-green" :style="[{transform: 'translate3d(-' + (100-loadProgress) + '%, 0px, 0px)'}]"></view>
    <view class="load-progress-spinner text-green"></view>
</view>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				loadProgress: 0
			};
		},
		methods: {
			LoadProgress(e) {
				this.loadProgress = this.loadProgress + 3;
				if (this.loadProgress < 100) {
					setTimeout(() => {
						this.LoadProgress();
					}, 100)
				} else {
					this.loadProgress = 0;
				}
			}
		}
	}
</script>
```