微信小程序使用vant4 weapp自定义菜单 但是弹出层却被菜单遮挡的解决办法

最终方案：通过 getTabBar() 直接控制自定义组件显隐

核心思路：wx.hideTabBar() 对自定义 tabBar 不生效，改用 this.getTabBar() 拿到组件实例，直接改其 data，再由 wx:if 驱动显隐。

---

涉及 3 个文件、共 4 处改动：

① custom-tab-bar/index.js --- 第 5 行、第 18-19 行

javascript

data: {
  visible: true,   // ← 新增：显隐开关
  // ...
},

pageLifetimes: {
  show() {
    this.setData({ visible: true })  // ← 新增：每次进页面自动恢复
    // ...
  }
}

---

② custom-tab-bar/index.wxml --- 第 1 行

xml

<!-- 原来 -->
<view class="tab-bar" wx:if="{{userType}}">

<!-- 改为 -->
<view class="tab-bar" wx:if="{{userType && visible}}">

---

③ guarantee-mission.js --- 第 117-120 行、第 143-148 行

javascript

// 打开弹窗 → 隐藏菜单
onShowGuaranteeMissionDetail(e) {
  // ...
  const tabBar = this.getTabBar()
  if (tabBar) {
    tabBar.setData({ visible: false })  // 菜单消失
  }
  this.setData({ showGuaranteeMissionDetail: true })  // 弹出弹窗
}

// 关闭弹窗 → 恢复菜单
onCloseGuaranteeMissionDetail() {
  const tabBar = this.getTabBar()
  if (tabBar) {
    tabBar.setData({ visible: true })   // 菜单恢复
  }
  this.setData({ showGuaranteeMissionDetail: false })
}

---

执行效果

code

点击卡片 → getTabBar() 获取组件 → setData({visible: false})
         → wx:if 条件变 false → 底部菜单从 DOM 移除
         → 弹窗弹出

关闭弹窗 → getTabBar() → setData({visible: true})
         → wx:if 条件变 true → 底部菜单恢复

这就是最终生效的方案。

---

进一步改进：使用监听的方式，不用一个个写：

核心原理就是 observers 数据监听：当任意一个 showXxxPopup 从 false 变为 true 时，observer 自动触发，将 tabBar 设为 hidden；当所有弹窗都恢复 false 时，tabBar 自动恢复。

两种实现：

页面 方式

任务页 独立 behavior tab-bar-control.js，监听 30+ 个弹窗字段

首页 直接在 Page 的 observers 里监听 showDetailPopup, showPunchModal

这样做的好处：

各 behavior 不再需要手动写 getTabBar().setData({ visible: ... }) --- 已全部删除

以后新增弹窗，只需在 observer 的字段列表里加一个名字即可