GEKE_PHONE/pages/basics/loading.vue

<template>
	<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>
		<view class="cu-bar bg-white">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>背景
			</view>
		</view>
		<view class="cu-load bg-blue" :class="!isLoad?'loading':'over'"></view>
		<view class="cu-bar bg-white margin-top">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>加载状态
			</view>
			<view class="action">
				<switch @change="isLoading" :class="isLoad?'checked':''"></switch>
			</view>
		</view>
		<view class="cu-load bg-grey" :class="!isLoad?'loading':'over'"></view>
		<view class="cu-bar bg-white margin-top">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>加载错误
			</view>
		</view>
		<view class="cu-load bg-red erro"></view>

		<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="LoadModal">
					点我
				</button>
			</view>
		</view>
		<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>
		<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>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				isLoad:false,
				loadModal: false,
				loadProgress: 0
			};
		},
		methods: {
			isLoading(e) {
				this.isLoad = e.detail.value;
			},
			LoadModal(e) {
				this.loadModal = true;
				setTimeout(() => {
					this.loadModal = false;
				}, 2000)
			},
			LoadProgress(e) {
				this.loadProgress = this.loadProgress + 3;
				if (this.loadProgress < 100) {
					setTimeout(() => {
						this.LoadProgress();
					}, 100)
				} else {
					this.loadProgress = 0;
				}
			}
		}
	}
</script>

<style>

</style>