2023/3/1 uni-app自定义loading

1.在components 里面创建loading.vue

1.  
   <template>
2.  
   <view v-show="loadingShow">
3.  
   <view class="request-loading-view">
4.  
   <view class="loading-view"><view class="loading"></view></view>
5.  
   </view>
6.  
   </view>
7.  
   </template>
8.  
   <script>
9.  
   export default {
10.  
    data() {
11.  
    return {};
12.  
    },
13.  
    computed: {
14.  
    //计算属性判断vuex中的显示状态
15.  
    loadingShow() {
16.  
    return this.$store.state.loading.requestLoading;
17.  
    }
18.  
    }
19.  
    };
20.  
    </script>
21.  
     
22.  
    <style scoped>
23.  
    .request-loading-view {
24.  
    position: fixed;
25.  
    top: 0;
26.  
    left: 0;
27.  
    width: 100%;
28.  
    height: 100%;
29.  
    z-index: 10000;
30.  
    background-color: rgba(0, 0, 0, 0.001);
31.  
    display: flex;
32.  
    justify-content: center;
33.  
    align-items: center;
34.  
    }
35.  
    .loading-view {
36.  
    width: 160upx;
37.  
    height: 160upx;
38.  
    background-color: rgba(0, 0, 0, 0.6);
39.  
    border-radius: 20upx;
40.  
    display: flex;
41.  
    justify-content: center;
42.  
    align-items: center;
43.  
    }
44.  
     
45.  
    /* 动画样式 */
46.  
    .loading {
47.  
    border: 10upx solid rgba(0, 0, 0, 0.01);
48.  
    border-radius: 50%;
49.  
    border-top: 10upx solid #fff;
50.  
    border-right: 10upx solid #fff;
51.  
    border-bottom: 10upx solid #fff;
52.  
    width: 60upx;
53.  
    height: 60upx;
54.  
    -webkit-animation: spin 1.4s linear infinite;
55.  
    animation: spin 1.4s linear infinite;
56.  
    }
57.  
     
58.  
    @-webkit-keyframes spin {
59.  
    0% {
60.  
    -webkit-transform: rotate(0deg);
61.  
    }
62.  
     
63.  
    100% {
64.  
    -webkit-transform: rotate(360deg);
65.  
    }
66.  
    }
67.  
     
68.  
    @keyframes spin {
69.  
    0% {
70.  
    transform: rotate(0deg);
71.  
    }
72.  
     
73.  
    100% {
74.  
    transform: rotate(360deg);
75.  
    }
76.  
    }
77.  
    </style>

2.加载vuex在里面定义变量控制是否显示隐藏

1.  
    
2.  
   const state = {
3.  
   requestLoading: false, //加载等待是否显示
4.  
   }
5.  
    
6.  
    
7.  
   const mutations = {
8.  
    
9.  
   //显示请求加载动画
10.  
    requestShowLoading(state) {
11.  
    state.requestLoading = true;
12.  
    },
13.  
    //隐藏请求加载动画
14.  
    requestHideLoading(state) {
15.  
    state.requestLoading = false;
16.  
    },
17.  
    }
18.  
     
19.  
    export default {
20.  
    namespaced: true,
21.  
    state,
22.  
    mutations,
23.  
    }

3.在main.js里面导入组件和定义方法

1.  
    
2.  
   //请求加载组件
3.  
   import tLoading from '@/components/loading/loading.vue';
4.  
    
5.  
   // 在main.js中注册全局组件
6.  
   Vue.prototype.$store = store
7.  
    
8.  
   //组件挂载到全局，方便每个页面使用
9.  
   Vue.component('Loading', Loading);
10.  
     
11.  
    //挂载全局显示/隐藏请求加载动画
12.  
    function requestShowLoading(){
13.  
    this.$store.commit('ShowLoading');
14.  
    }
15.  
    function requestHideLoading(){
16.  
    this.$store.commit('HideLoading');
17.  
    }
18.  
    Vue.prototype.$showLoading = ShowLoading; //全局显示动画可以 this.$showLoading();
19.  
    Vue.prototype.$hideLoading = HideLoading; //全局隐藏动画可以 this.$hideLoading();

4.在需要的页面使用Loading

1.  
   例如：home.vue
2.  
    
3.  
   <view>
4.  
   <!-- loading -->
5.  
   <Loading></Loading>
6.  
   </view>
7.  
    
8.  
   onLoad() {
9.  
   this.$showLoading();
10.  
    数据加载完之后
11.  
    that.$hideLoading();
12.  
    },

这篇好文章是转载于：学新通技术网