uniapp小程序自定义loding,通过状态管理配置全局使用

一、在项目中创建loding组件

在uniapp的components文件夹下创建loding组件,如图:

示例代码:

c 复制代码
<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

c 复制代码
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状态管理(状态管理可以按自己的需求配置)

状态管理存储: 在store文件夹下创建modules文件,里面创建loding.js

c 复制代码
const app = {
	state: {
		loding: false,
	},

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

	},

	actions: {

	}
}

export default app

模块统一暴露: 在store文件夹下创建modules文件,里面创建index.js

c 复制代码
import loding from './loding'

export default {
  login,
}

获取状态管理: 在store下创建getters.js

c 复制代码
const getters = {
	loding: state => state.my.loding, //loding
}


export default getters

创建状态管理: 在store下创建index.js

c 复制代码
import {createStore} from 'vuex'

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

export default new createStore({
  modules,
  state: {

  },
  mutations: {

  },
  actions: {

  },
  getters
})

获取状态管理属性值: 在store下创建getters.js

c 复制代码
const getters = {
	loding: state => state.my.loding, //loding
}


export default getters

四、在接口封装中,接口请求开始和接口请求成功,分别设置状态管理loding值为true和false

c 复制代码
// 请求结束
$http.requestEnd = options => {
  // 判断当前接口是否需要加载动画
  if (options.load) {
    requestNum = requestNum - 1
    if (requestNum <= 0) {
      store.commit('SET_LODING', false);
    }
  }
}
c 复制代码
// 请求开始拦截器
$http.requestStart = options => {
  if (options.load) {
    if (requestNum <= 0) {
      // 打开加载动画
     store.commit('SET_LODING', true);
    }
    requestNum += 1
  }
}

五、在页面中引用(因为uniapp无法像H5项目,可以在html中全局引用,所以需要在需要使用loding的页面引用即可),不用在接口中再配置显示隐藏

c 复制代码
<template>
<!-- 引用loding -->
	<xc-loading v-if="this.$store.getters.loding"></xc-loading>
</template>
相关推荐
CH_Qing几秒前
【udev】关于/dev 设备节点的生成 &udev
linux·前端·网络
小诸葛的博客5 分钟前
gin如何返回html
前端·html·gin
islandzzzz12 分钟前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
喝拿铁写前端13 分钟前
前端实战优化:在中后台系统中用语义化映射替代 if-else,告别魔法数字的心智负担
前端·javascript·架构
超人不会飛1 小时前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦1 小时前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想1 小时前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
The_cute_cat1 小时前
JavaScript的初步学习
开发语言·javascript·学习
海天胜景1 小时前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
今晚打老虎z1 小时前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net