如何在uniapp中自定义全局loading

uniapp中使用uni.showLoading可以调起全局loading，但loading样式是uniapp官方设计的。自己业务中可能需要调整成为自己想要的样式。

H5中设置全局loading

在H5中可以直接通过CSS更改loading样式

• 先使用loading，我们看看loading的默认样式

const showLoading = ()=>{
  uni.showLoading()
}

• 可以看到loading的样式主要是又类uni-toast进行控制的，通过一张背景图片和动画制作的
• 如此，我们可以通过覆盖CSS样式，改变loading的样式

比如：

代码：

注意css不能写在page页面中，需要在app.vue及上层引用

.uni-toast{
  background-color: #fff7f8;
  box-shadow: 0 0 10rpx pink;
  width: 160rpx;
  .uni-loading{
    background-image: none;
    border-radius: 50%;
    border-top: 16rpx pink solid;
  }
}

再比如：

代码：

.uni-toast {
  background-color: #000;
  box-shadow: 0 0 20rpx #000;

  .uni-loading {
    background-image: none;
    border: 2px #6572ff solid;
    animation: none;
    width: 70px !important;
    border-radius: 4px;
    height: 14px !important;
    position: relative;

    &::after {
      content: '';
      left: 0;
      position:absolute;
      display: inline-block;
      width: 20px;
      height: 10px;
      border-radius: 2px;
      background-color: #c1ff2f;
      animation: full 2s infinite;
    }

    @keyframes full {
      0% {
        width: 0;
      }
      100% {
        width: 67px;
      }
    }
  }
}

注意：修改uni-toast的样式时，也会影响到toast的样式，原生toast可以不使用图标，这样就和loading不冲突了。

感兴趣的伙伴可以自己DIY其他样式

APP中自定义全局loading

• 我们把H5中的方式用到APP中，会发现完全无效。

• 原因是app的loading使用的原生代码写的，而不是css。官方文档中可以通过www.html5plus.org/doc/zh_cn/n…来设置样式，从文档上看感觉可自定义的内容太少，所以我这里考虑另一种方式。

思路：

• 这里我采用页面的方式显示全局loading，开启loading时打开loading页面，关闭loading时返回上一页。

• 需要注意：

  1. 进入页面的方式需要采用淡入，这样有种弹出的效果
  2. 需要禁用侧滑返回
  3. loading页面的背景需要透明，这样才有在当前页面的弹出loading效果

• 类似我之前写的全局隐私政策弹窗一样的逻辑，对全局弹窗感兴趣的可以参考：juejin.cn/post/718915…

效果：

实现代码：

1. 新建loading页面

• 样式为了方便，我直接引用的图片，感兴趣的伙伴自己DIY

loading.vue

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

<script setup>
	import { onBackPress } from "@dcloudio/uni-app"
	// 安卓禁用侧滑返回
	onBackPress((e) => {
		// 安卓禁用侧滑返回
		if(e.from==='backbutton'){
			return true
		}
	})
</script>

<style>
	page {
		height: 100%;
		width: 100%;
		/* 设置页面背景透明 */
		background: transparent;
	}
</style>
<style lang="scss">
	.loading-wrapper {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 120rpx;
			height: 120rpx;
		}
	}
</style>

2. 配置pages.json

pages.json

{
  "path": "pages/loading/loading",
  "disableSwipeBack": true, // 禁用侧滑返回
  "style": {
    "navigationStyle": "custom",
    "app-plus": {
      "animationType": "fade-in",  // 页面进入无动画
      "background": "transparent",
      "backgroundColor": "transparent",
      "popGesture": "none", // 关闭IOS屏幕左边滑动关闭当前页面的功能
      "bounce": "none"
    }
  }
}

3. 使用和关闭loading

const showLoading = () => {
  // #ifdef APP
  // 开启loading
  uni.navigateTo({
    url:"/pages/loading/loading"
  })
  // 模拟真实场景，3秒后关闭loading，
  setTimeout(()=>{
    uni.navigateBack()
  },3000)
  // #endif

  // #ifdef H5
  uni.showLoading()
  // #endif
}

• 项目代码参考：github.com/Abner105/un…