uniapp框架app端监听tab中间按钮，显示隐藏遮罩

实现APP全局遮罩层的显示与隐藏

最新推荐文章于 2025-07-11 17:47:44 发布

原创

最新推荐文章于 2025-07-11 17:47:44 发布 · 2.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html

本文介绍如何在APP中实现全局遮罩层的显示与隐藏功能，包括在tab栏中间按钮监听、页面切换自动隐藏遮罩、点击遮罩关闭弹窗等操作，通过Vue和Vuex进行状态管理。

实现的功能

1.在app.vue中监听tab栏中间按钮，让每个页面都可以显示隐藏Popup 弹出层；
2.当在某一页面显示遮罩之后，切换到其他页面自动隐藏遮罩；
3.在某一页面显示遮罩后点击遮罩层隐藏；
4.在当前页面点击中间的突起按钮可实现遮罩层的显示和隐藏

tabBar的是实现的效果（移动端显示效果）
在这里插入图片描述

实现的过程

首先在app.vue中监听中间按钮是否被点击

onLaunch: function() {
   
   
    uni.onTabBarMidButtonTap(() => {
   
   
			let allv = this.$fb_showAction
			let stored = this.$store.state.showAction
			if (this.$fb_showAction === true && stored === true) {
   
   
				this.$fb_showAction = false
				this.$store.dispatch('setShowAction', this.$fb_showAction)  //异步的方式存储到vuex中
			} else if (this.$fb_showAction == false && stored === false) {
   
   
				this.$fb_showAction = true
				this.$store.dispatch('setShowAction',