React实现全局Loading

css

#__loading {position:fixed;top: 0;left: 0;z-index: 99999;display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;background: rgba(0, 0, 0, 0);
}

页面代码

使用了antd的Spin组件


import React from 'react'
import ReactDOM from 'react-dom'
import { Spin } from 'antd'class Loading {show (timeout) {const config = {tip: 'Loading...',}if (timeout) {window.setTimeout(() => {document.body.removeChild(document.getElementById('__loading'))}, timeout)}const dom = document.createElement('div')dom.setAttribute('id', '__loading')document.body.appendChild(dom)ReactDOM.render(<Spin {...config} />, dom)}hide() {document.body.removeChild(document.getElementById('__loading'))}
}export default new Loading()

其实是没有必要使用antd的Spin组件,自己通过css实现一个Loading效果,网上百度一堆这种代码,我这里使用antd的组件是因为我自己项目使用了antd,保证组件风格统一性。

注意点

刚开始我使用的css样式是position:absolute; 然后我发现我的Loading一会在页面中间,一会不在顶部。

通过查看css发现,自己的页面的body是可以滑动的,导致Loading位置时不时变化,如果页面不滑动Loading在页面中间,如果滑动就不在了。所以应该把css样式修改成position:fixed;就没问题了。(至于为啥自己页面body为啥可以滑动,是因为自己项目问题)。

推广一下自己开发的微信小程序,有兴趣的朋友可以玩一玩

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

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

相关文章

编程序中的魔法语句|循环-使用频率高的优雅代码

一. print和import的更多信息 1.1 使用逗号输出 A.打印多个表达式,用逗号隔开,会在每个参数之间插入一个空格符: 复制代码代码如下: >>> print age:,42 age: 42 B.同时输出文本和变量值,却又不希望使用字符串格式化: 复制代码代码如下: >>> name = Pe…

emmc存储大小解决方案

当发现emmc space 0.2G或者为0 的时候说名emmc有问题了&#xff0c;正常情况下是3.98G。 所以需要做如下处理&#xff1a; 输入&#xff1a;第一步&#xff1a;mkfs.ext4 /dev/mmcblk0p1 &#xff08;格式&#xff1a;mkfs.ext4 参数 设备名 原文链接&#xff1a;mkfs.ext4 命…

(c语言)字符逆序——非递归

#include<stdio.h> #include<string.h> int main(int argc, char* argv[]) {char a[10000];char b[10000];gets(a);int i, c;c (int)strlen(a);for (i 0; i < c; i){b[i] a[c-i-1]; //将\0之前的元素赋值给b[]}b[c] \0; //之后在所有元素后加上\0,将…

优思学院|调优操作(EVOP)是什么?

EVOP是Evolutionary Operation的缩写&#xff0c;中文多译作&#xff0c;调优操作&#xff0c;意思是进化地操作&#xff0c;也是实验设计方法中的其中一种&#xff0c;可以应用于六西格玛流程DMAIC里的改进阶段。 调优操作&#xff08;EVOP&#xff09;是一种用于改善过程或产…

Mac安装Nginx

一起学习 1、确认你的电脑是否安装homebrew&#xff0c;打开电脑终端 输入&#xff1a; /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"2、确认homebrew是否安装成功&#xff0c;在终端输入&#xff1a; br…

怎么远程控制电脑?两种方法轻松实现!

不知道电脑远程控制怎么弄&#xff1f;本文将分享两种简单又实用的远程控制方法&#xff0c;能够让你轻松的远程控制电脑。远程控制一直是一个备受关注的话题&#xff0c;无论在何种场合都能发挥作用。掌握了远程控制的方法&#xff0c;不仅能够快速解决紧急问题&#xff0c;还…

【老牌期刊】IF:6+,2天预审,3-5个月录用!

期刊简介 1区计算机智能类SCI 【期刊概况】IF&#xff1a;6.0-7.0&#xff0c;JCR1区&#xff0c;中科院2区&#xff1b; 【终审周期】走期刊部系统&#xff0c;3个月左右录用&#xff1b; 【检索情况】SCI检索&#xff1b; 【WOS收录年份】2018年&#xff1b; 【自引率】…

用友 CRM help2.php存在任意文件读取漏洞

文章目录 产品简介漏洞概述指纹识别漏洞利用修复建议 产品简介 用友CRM&#xff08;Customer Relationship Management&#xff0c;客户关系管理&#xff09;是由用友公司开发的一款软件&#xff0c;专门设计用于帮助企业管理与客户相关的业务活动。这款软件通常包括客户信息管…

windows 安装jenkins

下载jenkins 官方下载地址&#xff1a;Jenkins 的安装和设置 清华源下载地址&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/jenkins/windows-stable/ 最新支持java8的版本时2.346.1版本&#xff0c;在清华源中找不到&#xff0c;在官网中没找到windows的下载历史&#xff…

Python数据容器详解

文章目录 数据容器list 列表定义使用方法查找下标列表修改插入追加删除修改查询循环遍历 tuple 元组定义操作 str 字符串方法查找下标替换分割去除前后空格去除前后指定字符统计字符串出现次数统计字符串长度 序列的切片序列序列的切片 set 集合定义方法添加移除随机取出清空差…

单项链表的反转中,不能成功反转

package day5;import java.util.Stack; import java.util.zip.DeflaterOutputStream;/*** Author: monian* Tips: Wo yi wu ta,wei shou shu er!* Date: 2023/12/19 9:33*/ public class ArrayStackDemo3 {public static void main(String[] args) {//测试SingleLinkedStack st…

UE5 Landscape地貌制作 - 学习笔记

P2. 创建地形 https://www.bilibili.com/video/BV1mD4y1D7D6?p2&spm_id_frompageDriver&vd_source707ec8983cc32e6e065d5496a7f79ee6 新建一个Basic场景选择Landscape Mode 生成预览网格&#xff08;绿色网格&#xff09;从文件导入&#xff1a;可以导入dem高度图地貌…

Spring-MVC 源码分析--DispatcherServlet 初始化

文章目录 前言一、DispatcherServlet 概念以及作用&#xff1a;二、请求分发器 HandleMapping &#xff1a;2.1 HandleMapping 的概念及其作用&#xff1a;2.2 HandleMapping 的三种默认实现2.2.1 HandleMapping 实现的时机&#xff1a;2.2.2 RequestMappingHandlerMapping作用…

使用小程序实现App灰度测试的好处

灰度测试&#xff08;Gray Testing&#xff09;是一种软件测试策略&#xff0c;也被称为渐进性测试或部分上线测试。在灰度测试中&#xff0c;新的软件版本或功能并非一次性推送给所有用户&#xff0c;而是仅在一小部分用户中进行测试。这可以帮助开发团队逐步暴露新功能或版本…

Linux Kernel KDB KGDB 实体机内核调试

内核编译配置 CONFIG_DEBUG_INFOy # 编译debug infoCONFIG_MAGIC_SYSRQy # 功能编译开关 CONFIG_MAGIC_SYSRQ_DEFAULT_ENABLE0x1 # 默认开启项 默认存在 /proc/sysrq-trigger CONFIG_MAGIC_SYSRQ_SERIALy # 串行sysrq &…

vscode如何开发微信小程序?(保姆级教学)

1.安装“微信小程序开发工具”扩展 2.安装“vscode weapp api”扩展 3.安装“vscode wxml”扩展 4.安装“vscode-wechat”扩展 5.在终端执行命令&#xff1a; vue create -p dcloudio/uni-preset-vue uniapp-test uniapp-test就是我这里的项目名称了 6.如果遇到了这个错误&a…

KBU1010-ASEMI功率整流器件KBU1010

编辑&#xff1a;ll KBU1010-ASEMI功率整流器件KBU1010 型号&#xff1a;KBU1010 品牌&#xff1a;ASEMI 封装&#xff1a;KBU-4 特性&#xff1a;插件、整流桥 最大平均正向电流&#xff1a;10A 最大重复峰值反向电压&#xff1a;1000V 恢复时间&#xff1a;&#xff…

C++多态(2) ——抽象类与final、override关键字

C多态(2) ——抽象类与final、override关键字_c class final-CSDN博客

紫光展锐T820与飞桨完成I级兼容性测试 助推端侧AI融合创新

近日&#xff0c;紫光展锐高性能5G SoC T820与百度飞桨完成I级兼容性测试&#xff08;基于Paddle Lite工具&#xff09;。测试结果显示&#xff0c;双方兼容性表现良好&#xff0c;整体运行稳定。这是紫光展锐加入百度“硬件生态共创计划”后的阶段性成果。 本次I级兼容性测试完…

Vue 条件渲染 v-if

v-if 指令&#xff1a;用于控制元素的显示或隐藏。 执行条件&#xff1a;当条件为 false 时&#xff0c;会将元素从 DOM 中删除。 应用场景&#xff1a;适用于显示隐藏切换频率较低的场景。 语法格式&#xff1a; <div v-if"数据">内容</div> 基础用…