uniapp 点击动画_uni-app自定义加载动画组件

先写好一个加载动画组件，如：

export default {

data() {

return {};

},

computed: {

//计算属性判断vuex中的显示状态

loadingShow() {

return this.$store.state.requestLoading;

}

}

};

.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 {

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 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);

}

}

main.js 中添加相应引用，使用Vuex来记录显示状态，所以Vuex也需要引用

//Vuex

import store from './store'

Vue.prototype.$store = store

//请求加载组件

import requestLoading from './components/compt_requestLoading.vue';

//组件挂载到全局，方便每个页面使用

Vue.component('request-loading', requestLoading);

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

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();

Vuex的store/index.js中这样写

//Vuex

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

state: {

requestLoading: false //加载等待是否显示

},

mutations: {

//显示请求加载动画

request_show_loading(state) {

state.requestLoading = true;

},

//隐藏请求加载动画

request_hide_loading(state) {

state.requestLoading = false;

}

}

})

export default store

然后每个页面添加标签

即可

调用显示/隐藏可以直接

this.$showLoading()

this.$hideLoading()