WeChat applet, global variables change in one place and the state in other places also changes.

I have a mask layer with a button to hide it. It appears on many pages. How can I ensure that if I click hide on one of the pages, the other pages will not appear?

I have displayed the mask layer of this official account on all three tab pages, but I clicked delete on one of the pages, and the other pages were not displayed.

Write it as a public component.Listening in components, two life cycles

lifetimes: // life cycle function, which can be a function, or a method name defined in the methods section pageLifetimes: // the life cycle of the page where the component is locatedFunction

In both life cycles, the current global variable must be assigned to

app.js inside the definitionshowOfficial

globalData: {showOfficial:true,//Whether to display the bar that follows the official account},

official-bar.js

const app = getApp();Component({/*** Component property list*/properties: {},/*** The initial data of the component*/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})// page is displayed},},/*** List of methods of the component*/methods: {//focus onclickMask() {wx.navigateTo({url: "/pages_subpack/officialAccount/officialAccount"})},// hide the current maskdelBar() {app.globalData.showOfficial=false;//Change the value of the global variablethis.setData({show: false})},}})

official-bar.wxml

Follow the official account, automatic reminders in classFollow now

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;}/*mask content*/.modal-content{color:#fff;display: flex;justify-content:space-evenly;align-items: center;text-align: center;font-size:32rpx;padding-left: 20rpx;width: 100%;}/*Intermediate content*/.main-content{flex: 1;height: 100%;overflow-y: hidden;max-height: 80vh; /* The content height is up to 80vh to avoid overflowing too much content*/}.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;}

Introduced in json

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

The page you want to use