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

一、在项目中创建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: 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状态管理(状态管理可以按自己的需求配置)

在这里插入图片描述

状态管理存储: 在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 - 1if (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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/15252.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot环境标识设置及nacos匹配配置

本地环境标识设置 本地父类maven配置 可以看到相关的分类&#xff0c;设置环境标识主要需要用到profiles; <profiles><profile><id>dev</id><properties><!-- 环境标识&#xff0c;需要与配置文件的名称相对应 --><profiles.active&…

用html+javascript打造公文一键排版系统9:主送机关排版

一、主送机关的规定 公文一般在标题和正文之间还有主送机关&#xff0c;相关规定为&#xff1a; 主送机关 编排于标题下空一行位置&#xff0c;居左顶格&#xff0c;回行时仍顶格&#xff0c;最后一个机关名称后标全角冒号。如主送机关名称过多导致公文首页不能显示正文时&…

c刷题(一)

目录 1.输出100以内3的倍数 2.将3个数从大到小输出 3.打印100~200素数 方法一 方法二 4.显示printf的返回值 最大公约数 试除法 辗转相除法 九九乘法表 求十个数的最大值 1.输出100以内3的倍数 法一&#xff1a; int n 0; while (n*3 < 100){printf("%d &q…

基于物联网、视频监控与AI视觉技术的智慧电厂项目智能化改造方案

一、项目背景 现阶段&#xff0c;电力行业很多企业都在部署摄像头对电力巡检现场状况进行远程监控&#xff0c;但是存在人工查看费时、疲劳、出现问题无法第一时间发现等管理弊端&#xff0c;而且安全事件主要依靠人工经验判断分析、管控&#xff0c;效率十分低下。 为解决上述…

基于双 STM32+FPGA 的桌面数控车床控制系统设计

桌 面数控 设 备 对 小 尺寸零件加工在成 本 、 功 耗 和 占 地 面 积等方 面有 着 巨 大 优 势 。 桌 面数控 设 备 大致 有 3 种 实 现 方 案 : 第 一种 为 微 型 机 床搭 配 传统 数控系 统 &#xff0c; 但 是 桌 面数控 设 备 对 成 本 敏感 ; 第二 种 为 基 于 PC…

使用Flutter的image_picker插件实现设备的相册的访问和拍照

文章目录 需求描述Flutter插件image_picker的介绍使用步骤1、添加依赖2、导入 例子完整的代码效果 总结 需求描述 在应用开发时&#xff0c;我们有很多场景要使用到更换图片的功能&#xff0c;即将原本的图像替换设置成其他的图像&#xff0c;从设备的相册或相机中选择图片或拍…

使用serverless实现从oss下载文件并压缩

公司之前开发一个网盘系统, 可以上传文件, 打包压缩下载文件, 但是在处理大文件的时候, 服务器遇到了性能问题, 主要是这个项目是单机部署.......(离谱), 然后带宽只有100M, 现在用户比之前多很多, 然后所有人的压缩下载请求都给到这一台服务器了, 比如多个人下载的时候带宽问…

tensorRT多batch动态推理

tensorRT的多batch推理&#xff0c;导出的onnx模型必须是动态batch&#xff0c;只需在导出的时候&#xff0c;设置一个dynamic_axis参数即可。 torch.onnx.export(hybrik_model, dummy_input, "./best_model.onnx", verboseTrue, input_namesinput_names, \output_…

计算机基本硬件的内部结构

1.早期冯诺依曼机结构 世界上第一台计算机ENIAC是使用手动接线来控制计算&#xff0c;十分麻烦。 冯诺依曼提出“存储程序”的概念&#xff0c;是指将指令以二进制代码的形式事先输入计算机的主存储器&#xff08;内存&#xff09;&#xff0c;然后按照其在存储器中的首地址执…

c++ ,vs2019, cpp20规范之 forward_list 源码分析

通过阅读源码可知&#xff0c;该单向链表不像list双向链表那样有专门的前导节点。即list._Mypair._Myval2._head._next才指向第一个有效数据节点。而 forward_list ._Mypair._Myval2._head 已经指向了有效数据节点。原因就在于复杂巧妙的类型转换。如下图的构造函数里&#xff…

Spring-ApplictionContext

Spring Spring是整个Java体系最核心的框架&#xff0c;没有之一。 核心类图结构 ApplicationContext ApplicationEventPublisher&#xff1a;提供了一种机制&#xff0c;用于通知应用程序中感兴趣的部分有关其执行过程中发生的特定事件。ListableBeanFactory&#xff1a;是S…

python结合tesseract-ocr识别汉字的训练库过程

一、安装python 例如&#xff0c;安装路径为&#xff1a;C:\rtkapp\python-3.8.0 二、安装opencv 三、安装tesseract-ocr 安装完成后&#xff0c;在系统环境变量path中&#xff0c;添加安装路径C:\rtkapp\Tesseract-OCR 四、打开python安装pytesseract 五、安装java运行环境…

测试开源C#人脸识别模块ViewFaceCore(5:质量检测和眼睛状态检测)

ViewFaceCore模块中的FaceQuality支持预测人脸质量&#xff0c;最初以为是预测人体体重&#xff0c;实际测试过程中才发现是评估人脸图片质量&#xff0c;主要调用Detect函数执行图片质量检测操作&#xff0c;其函数原型如下所示&#xff1a; //// 摘要:// 人脸质量评估///…

webstorm配置less转译

Program中路径如果识别不到 项目文件\node_modules.bin\lessc

springCloud Eureka注册中心配置详解

1、创建一个springBoot项目 2、在springBoot项目中添加SpringCloud依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-dependencies</artifactId><version>2021.0.3</version><type>…

【MySQL数据库备份】

目录 一、概述 二、数据备份的重要性 1. 数据保护 2. 灾难恢复 3. 数据完整性 4. 合规性要求 三、造成数据丢失的原因 1. 硬件故障 2. 人为错误 3. 黑客攻击 4. 自然灾害 5. 软件故障 四、备份类型 1.物理与逻辑角度 1.1 概念 1.2 物理备份 1.2.1 冷备份 1.2…

Flutter:滑动面板

前言 无意中发现了这个库&#xff0c;发现现在很多app中都有类似的功能。以手机b站为例&#xff0c;当你在看视频时&#xff0c;点击评论&#xff0c;视频会向上偏移&#xff0c;下方划出评论界面。 sliding_up_panel SlidingUpPanel是一个Flutter插件&#xff0c;用于创建滑…

Stable Diffusion 硬核生存指南:WebUI 中的 VAE

本篇文章聊聊 Stable Diffusion 生态中呼声最高、也是最复杂的开源模型管理图形界面 “stable-diffusion-webui” 中和 VAE 相关的事情。 写在前面 Stable Diffusion 生态中有一个很重要的项目&#xff0c;它对于 SD 生态繁荣做出的贡献可以说居功至伟&#xff0c;自去年八月…

13. Mybatis-Plus

目录 1. MyBatis-Plus 简介 2. 新建项目 3. 添加依赖 4. 配置数据库 5. 编码 1. MyBatis-Plus 简介 通过官网&#xff1a;MyBatis-Plus MyBatis-Plus (opens new window)&#xff08;简称 MP&#xff09;是一个 MyBatis (opens new window)的增强工具&#xff0c;在 MyB…

W2NER详解

论文&#xff1a;https://arxiv.org/pdf/2112.10070.pdf 代码&#xff1a;https://github.com/ljynlp/W2NER 文章目录 W2NER介绍模型架构解码 源码介绍数据输入格式模型代码 参考资料 W2NER 介绍 W2NER模型&#xff0c;将NER任务转化预测word-word&#xff08;备注&#xff…