封装一个requestLoadingg组件(针对请求中的出现loading的情况)

1.其中requestLoading组件内容如下;

<template>

<!--#ifndef MP-WEIXIN-->
<view class="request-loading-view" v-show="loadingShow" @click="closeMask">
<view class="loading-view"><view class="loading"></view></view>
</view>
<!--#endif-->
</template>
<script>
export default {
data() {
return {
loading:true
};
},
methods:{
closeMask(){
this.$store.state.requestLoading = false;
}
},
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.1);
display: flex;
justify-content: center;
align-items: center;
}
.loading-view {
width: 160upx;
height: 160upx;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 20upx;
display: flex;
justify-content: center;
align-items: center;
}

/* 动画样式 */
.loading {
border: 10upx solid rgba(0, 0, 0, 0.01);
border-radius: 50%;
border-top: 10upx solid #fff;
border-right: 10upx solid #fff;
border-bottom: 10upx solid #fff;
width: 60upx;
height: 60upx;
-webkit-animation: spin 0.8s linear infinite;
animation: spin 0.8s 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.vuex中的store的内容如下；

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

export default store

 

3.另外还需在main.js中做一个全局挂载，有关代码如下;

//组件挂载到全局，方便每个页面使用
Vue.component('request-loading', requestLoading);

//挂载全局显示/隐藏请求加载动画

 

写入方法;
function showLoading(){
store.commit('request_show_loading');
}
function hideLoading(){
store.commit('request_hide_loading');
}

在vue的原型下进行挂载;

Vue.prototype.$hideLoading = hideLoading;

 

在做请求时做如下的引用（如下是示例做其中一个请求时）：

const getReqXml = (obj)=>{

return new Promise(resolve=>{
// var baseUrl = 'http://xqt.imaj.top:8080';
var baseUrl = 'http://xiaoq.shgb.xyz:8080';
var accessToken = uni.getStorageSync("token");
if(obj.baseUrl){
baseUrl = obj.baseUrl;
}
uni.request({
url:baseUrl+obj.url,
method: obj.type?obj.type:'GET',
header:{
'content-type': 'application/x-www-form-urlencoded',
// "Access-Token":obj.reqJson.token,
token:accessToken
},
dataType:'json',
data:obj.reqJson,
changeOrigin: true, // 允许跨域
timeout:10000,
success:(res)=>{
if(res.data.code == 0){
resolve(res.data);
}else{
msg(res.data.message);
hideLoading();
}
},
fail:(e)=>{
console.log(e);
msg(e.errMsg);
hideLoading();
},
complete:()=>{
console.log("complete");
}
})
})
}