uniapp 自定义 Loading

在这里插入图片描述

components/m-loading/m-loading.vue

<template>
  <view class="loading-box" v-show="show" @click="dismiss">
    <image class="rotate" src="/static/loading.svg"></image>
  </view>
</template>

<script>
  export default {
    data() {
      return {};
    },
    methods: {
      dismiss() {
        this.$store.commit("showLoading", false);
      },
    },
    computed: {
      show() {
        return this.$store.state.loading;
      },
    },
  };
</script>

<style>
  .loading-box {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .loading-box image {
    margin-bottom: 40px;
    width: 180px;
    height: 180px;
  }

  .rotate {
    animation: rotate 2s ease-in-out infinite;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg)
    }

    to {
      transform: rotate(360deg)
    }
  }
</style>

store/index.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    loading: false
  },
  mutations: {
    showLoading(state, show) {
      state.loading = show;
    }
  }
})

export default store

main.js

import Vue from 'vue';
import App from './App';

import store from "./store";

function showLoading(show) {
  store.commit("showLoading", show);
}

Vue.prototype.$store = store;
Vue.prototype.$showLoading = showLoading;

Vue.config.productionTip = false;

App.mpType = 'app';

const app = new Vue({
  store,
  ...App,
});
app.$mount();

static目录下放入loading 图片 static/loading.svg

index.vue

<template>
  <view class="container">
    <m-loading></m-loading>
  </view>
</template>

js中使用

this.$showLoading(true)
this.$showLoading(false)

工具类中使用

import store from "store";

store.commit("showLoading", true);//显示
store.commit("showLoading", false);//隐藏
  • 4
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值