自定义loadding组件

1. 先写一个动画组件loading.vue：

<template>
	<view class="request-loading-view" v-show="loadingShow">
		<view class="loading-view">
			<view class="loading"></view>
			<view>加载中...</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		computed: {
			//计算属性判断vuex中的显示状态
			loadingShow() {
				return this.$store.state.requestLoading;
			}
		}
	};
</script>

<style scoped>
	.request-loading-view {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 198903060;
		background-color: rgba(0, 0, 0, 0.001);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loading-view {
		font-size: 28upx;
		color: #fff;
		width: 200upx;
		height: 200upx;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 20upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	/* 动画样式 */
	.loading {
		margin-bottom:20upx;
		border: 6upx solid rgba(0, 0, 0, 0.01);
		border-radius: 50%;
		border-top: 6upx solid #fff;
		border-right: 6upx solid #fff;
		border-bottom: 6upx solid #fff;
		width: 60upx;
		height: 60upx;
		-webkit-animation: spin 1.4s linear infinite;
		animation: spin 1.4s linear infinite;
	}

	@-webkit-keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
		}
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>

2. 在main.js中引用组件，并在vue的原型上添加方法

import Vue from 'vue'
import store from './common/store'

import Loading from './components/loading/loading.vue';

//挂载全局显示/隐藏请求加载动画
function showLoading(){
	store.commit('request_show_loading');
}
function hideLoading(){
	store.commit('request_hide_loading');
}

Vue.prototype.$showLoading = showLoading; //全局显示动画可以 this.$showLoading();
Vue.prototype.$hideLoading = hideLoading; //全局隐藏动画可以 this.$hideLoading();

3. 在store中配置相关的参数

state:{
	  requestLoading: false, //加载等待是否显示
},
mutations: {
		//显示请求加载动画
		request_show_loading(state) {
			state.requestLoading = true;
		},
		//隐藏请求加载动画
		request_hide_loading(state) {
			state.requestLoading = false;
		}
	},

4. 在需要使用的也页面进行开启和关闭操作

this.$showLoading(); //开启loading
this.$hideLoading(); // 关闭loading

效果如下：