微信小程序，全局变量一个地方改变了其他地方的状态也跟着改变。

我有个遮罩层有个点击隐藏的按钮，他在很多页面都出现这个遮罩，怎么保证在其中一个页面点击了隐藏，其他的页面都不会出现了？

我在三个tab页面都显示了这个关注公众号的遮罩层，但是在其中一个 页面点击后面的删除，其他的页面也不显示了.

把它写成一个公共的组件。在组件中监听，两个生命周期

lifetimes：//生命周期函数，可以为函数，或一个在 methods 段中定义的方法名 pageLifetimes：// 组件所在页面的生命周期函数

两个生命周期都要把当前全局的变量赋值给

app。js里面定义showOfficial

globalData: {
    showOfficial:true,//是否显示关注公众号的bar
},

official-bar.js

const app = getApp();
Component({
    /**
     * 组件的属性列表
     */
    properties: {},

    /**
     * 组件的初始数据
     */
    data: {
        show:true,
        checkIcon: 'https://wechat/static/wechat/check.png',
        deleteIcon: 'https://wechat/static/wechat/deleteIcon.png',
    },
    lifetimes: {
        attached: function() {
            this.setData({
                show:app.globalData.showOfficial
            })
        },
    },
    pageLifetimes: {
        show: function() {
            this.setData({
                show:app.globalData.showOfficial
            })
            // 页面被展示
        },
    },
    /**
     * 组件的方法列表
     */
    methods: {
        //关注
        clickMask() {
            wx.navigateTo({
                url: "/pages_subpack/officialAccount/officialAccount"
            })
        },
        //隐藏当前的遮罩
        delBar() {
            app.globalData.showOfficial=false;//改变全局变量的值
            this.setData({
                show: false
            })
        },


    }
})

official-bar.wxml

<view class='modal-mask'  wx:if="{
   {show}}"  catchtap='clickMask'>
 <view class='modal-content'>
  <image src="{
   {checkIcon}}" class="check-icon"></image>
    <view>关注公众号，上课自动提醒</view>
     <button  class="payAttention" type="primary"  block>立即关注</button>
  <view class="delete-area" catchtap="delBar">
   <image src="{
   {deleteIcon}}" class="delete-icon"></image>
  </view>

 </view>
</view>

 official-bar.wxss

.modal-mask{
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
  height:76rpx;
 }
 /*遮罩内容*/
 .modal-content{
   color:#fff;
  display: flex;
  justify-content:space-evenly;
  align-items: center;
  text-align: center;
  font-size:32rpx;
  padding-left: 20rpx;
  width: 100%;
 }
 /*中间内容*/
 .main-content{
  flex: 1;
  height: 100%;
  overflow-y: hidden; 
  max-height: 80vh; /* 内容高度最高80vh 以免内容太多溢出*/
 }

.check-icon{
  padding-right:18rpx;
  width:32rpx;
  height:32rpx;
}
.delete-icon{
  width:38rpx;
  height:38rpx;
}
 .delete-area{
  height: 69rpx;
  line-height: 86rpx;
  padding: 0 20rpx;
 }
 .payAttention{
   background-color: #EB8207 !important;
   border:none;
   border-radius: 76rpx;
   width: 160rpx;
   height:52rpx;
   line-height:52rpx;
   font-size:28rpx;
   padding:0;
   margin: 0 0 0 20rpx;
 }

json里面引入

"official-bar": "/components/official-bar"

想要使用的页面

<official-bar></official-bar>