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

uniapp小程序自定义loding,通过状态管理配置全局使用该文章介绍了在 uniapp 项目中创建自定义 loding 组件 并通过 vuex 进行全局状态管理 包括在 main js 中挂载 store 配置 loding 状态 接口请求时动态设置 loding 状态 以及在页面中引用 loding 组件的方法

大家好,欢迎来到IT知识分享网。

一、在项目中创建loding组件

在uniapp的components文件夹下创建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: ; .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状态管理(状态管理可以按自己的需求配置)

在这里插入图片描述

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

const app = { 
    state: { 
    loding: false, }, mutations: { 
    SET_LODING: (state, value) => { 
    state.loding = value } }, actions: { 
    } } export default app 

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

import loding from './loding' export default { 
    login, } 

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

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

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

import { 
   createStore} from 'vuex' import modules from './modules' import getters from './getters' export default new createStore({ 
    modules, state: { 
    }, mutations: { 
    }, actions: { 
    }, getters }) 

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

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

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

// 请求结束 $http.requestEnd = options => { 
    // 判断当前接口是否需要加载动画 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> 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/151333.html

(0)
上一篇 2025-03-14 14:00
下一篇 2025-03-14 14:05

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信