一、在項目中創(chuàng)建loding組件

在uniapp的components文件夾下創(chuàng)建loding組件，如圖：

示例代碼：

<template>
	<view class="loginLoading">
		<image src="../../static/loading.gif"  class="loading-img" mode=""></image>
	</view>
</template>

<script>
	export default {
		name:"loading",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	 .loginLoading{
	   width:100%;
	   height:100%;
	   display: flex;
	   left: 0;
	   top: 0;
	   right: 0;
	   bottom: 0;
	   flex-direction: column;
	   position: fixed;
	   justify-content: center;
	   align-items: center;
	   z-index: 999999;
	   .loading-img{
		   width:300rpx;
		   height:110rpx;
	   }
	 }
</style>

二、在main.js中全局掛載store

import App from './App'
import store from './store'

import { createSSRApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n(i18nConfig)
export function createApp() {
  const app = createSSRApp(App)
  
  //配置全局屬性
  app.config.globalProperties.$store=store;
  // 全局國際化配置
  app.use(i18n)
  return {
    app,
	store,
	created: bootstrap
  }
}

三、配置loding狀態(tài)管理（狀態(tài)管理可以按自己的需求配置）

狀態(tài)管理存儲: 在store文件夾下創(chuàng)建modules文件，里面創(chuàng)建loding.js

const app = {
	state: {
		loding: false,
	},

	mutations: {
		SET_LODING: (state, value) => {
			state.loding = value
		}

	},

	actions: {

	}
}

export default app

模塊統(tǒng)一暴露： 在store文件夾下創(chuàng)建modules文件，里面創(chuàng)建index.js

import loding from './loding'

export default {
  login,
}

獲取狀態(tài)管理： 在store下創(chuàng)建getters.js

const getters = {
	loding: state => state.my.loding, //loding
}


export default getters

創(chuàng)建狀態(tài)管理： 在store下創(chuàng)建index.js

import {createStore} from 'vuex'

import modules from './modules'
import getters from './getters'

export default new createStore({
  modules,
  state: {

  },
  mutations: {

  },
  actions: {

  },
  getters
})

獲取狀態(tài)管理屬性值： 在store下創(chuàng)建getters.js文章來源地址http://www.zghlxwxcb.cn/news/detail-619151.html

const getters = {
	loding: state => state.my.loding, //loding
}


export default getters

四、在接口封裝中，接口請求開始和接口請求成功，分別設(shè)置狀態(tài)管理loding值為true和false

// 請求結(jié)束
$http.requestEnd = options => {
  // 判斷當(dāng)前接口是否需要加載動畫
  if (options.load) {
    requestNum = requestNum - 1
    if (requestNum <= 0) {
      store.commit('SET_LODING', false);
    }
  }
}

// 請求開始攔截器
$http.requestStart = options => {
  if (options.load) {
    if (requestNum <= 0) {
      // 打開加載動畫
     store.commit('SET_LODING', true);
    }
    requestNum += 1
  }
}

五、在頁面中引用（因為uniapp無法像H5項目，可以在html中全局引用，所以需要在需要使用loding的頁面引用即可），不用在接口中再配置顯示隱藏

<template>
<!-- 引用loding -->
	<xc-loading v-if="this.$store.getters.loding"></xc-loading>
</template>

到了這里，關(guān)于uniapp小程序自定義loding，通過狀態(tài)管理配置全局使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！