公告列表
公告列表
收藏
回答

小程序tabBar层级z-index问题，自定义弹窗遮挡不住

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug tabBar 客户端 6.7.3 2.4


示例截图！上面遮罩遮住的是自己写的自定义底部tabBar导航，下面是小程序官方tabBar组件。自定义的弹窗和遮罩不能将官方tabBar组件盖住，导致点击官方tabBar组件还能切换页面。@官方人员！能否给方便开发者自定义官方tabBar组件层级？能否方便开发者自定义弹窗遮罩全屏覆盖包括官方tabBar？会不会考虑以后的版本有这样的优化？

随便写一个tabBar
回答关注问题邀请回答
收藏

24 个回答

  • 晨
    晨
    2018-11-12

    tabbar是客户端原生的，位于最顶层目前没办法覆盖。如果需要覆盖目前建议自己定制一个tabbar

    2018-11-12
    有用 1
    回复 6
    • 🐠糖醋鱼
      🐠糖醋鱼
      2018-11-12

      wx.hideTabBar

      wx.showTabBar

      暂时用这种折中的办法隐藏了，真希望官方能出一个开发自定义的组件弹窗和遮罩，这样能解决全屏覆盖。

      2018-11-12
      赞 2
      回复
    • 卢霄霄
      卢霄霄
      2018-11-12回复🐠糖醋鱼

      感觉需要一个原生遮罩层~把上下的导航栏都挡住

      2018-11-12
      赞 2
      回复
    • 🐠糖醋鱼
      🐠糖醋鱼
      2018-11-12回复卢霄霄

      是的，原生的交互模态对话框都能遮住，如果官方出一个原生的遮罩层同时用户可以在这个原生遮罩层上自定义自己的弹窗内容那就好了，只是不知道这样的简单的需求官方啥时候才能出。现在真的很影响用户体验，用原生的就无法遮住，用自己的切换的时候又没有官方的流畅。好无语

      2018-11-12
      赞
      回复
    • 岚枫
      岚枫
      2019-03-11

      自定义tabbar，但是在页面中定义的fixed组件，还是无法覆盖自定义的tabbar

      2019-03-11
      赞
      回复
    • spiritelf（黄钦
      spiritelf（黄钦
      2020-08-04回复岚枫
      解决了吗，使用有赞自定义tabbar也还是无法被遮罩住
      2020-08-04
      赞
      回复
    查看更多(1)
  • 我请问呢
    我请问呢
    2021-06-24

    我用的自定义tabar，弹窗盖不住tabar，然后把层级改成z-index:9999999;然后就可以了（5个9基本就能盖住了），xswl

    2021-06-24
    有用 25
    回复 23
    • 张旭东
      张旭东
      2021-08-03
      牛逼啊铁铁，我放了9999999果然遮住了
      2021-08-03
      赞
      回复
    • harry
      harry
      2021-09-19
      厉害啊老哥。5个9完美解决
      2021-09-19
      赞 1
      回复
    • Wx
      Wx
      2021-09-26
      笑死，5个9真的有用😆
      2021-09-26
      赞 1
      回复
    • 烙饼卷豆包
      烙饼卷豆包
      2021-09-28
      太牛了，完美解决
      2021-09-28
      赞
      回复
    • 秋山🇨🇳
      秋山🇨🇳
      2021-10-08
      骗子，根本不行
      2021-10-08
      赞
      回复
    查看更多(18)
  • 相遇
    相遇
    2023-03-04

    现在都2023年了，还不解决？ 获取用户头像昵称的api能改八次了，真正需要改的从来没解决过。

    2023-03-04
    有用 9
    回复 1
  • 羊也士
    羊也士
    2021-09-07

    自定义tabbar里cover-view标签改为view标签，然后把弹框的z-index设置大于9999的值就可以

    2021-09-07
    有用 3
    回复 1
    • EADGBE
      EADGBE
      09-12
      有用，就是这个了
      09-12
      赞
      回复
  • 空白格
    空白格
    2019-08-28

    确实，感觉很影响用户体验，啥时候官方出一个啊！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

    2019-08-28
    有用 2
    回复
  • 梦
    梦
    2023-04-24

    有个比较简单的方法， 就是在自定义table中写个笼罩层样式，然后打开自定义弹窗的时候，改变自定义table样式

    .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    height: 116rpx;
    align-items: center;
    background-color: #fff;
    border-top: 1rpx solid #E5E5E5;
    padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-layer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    height: 116rpx;
    align-items: center;
    background-color: #fff;
    padding-bottom: env(safe-area-inset-bottom);
    &::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background-color: rgba(0,0,0,1);
      opacity: 0.5;
      backdrop-filter: blur(7px);
      // filter:blur(5px);
    }
  }
    2023-04-24
    有用 1
    回复
  • 神经蛙
    神经蛙
    09-10

    2024 除了 z-index 有更优雅妥当的做法吗？

    09-10
    有用
    回复
  • 虾仁鱼🍤🚶🐠
    虾仁鱼🍤🚶🐠
    04-26

    2023年亲测可用，解决dialog无法遮挡自定义tabbar的问题：

    1.运行模拟器，找到dialog组件最外层包裹的view的class

    2.强制修改组件的z-index

    .dialog-dialog--weui-dialog__root {
  z-index: 999999999 !important
}
    04-26
    有用
    回复
  • yoo
    yoo
    2022-07-06

    2022.07了，这个问题还是存在

    自定义tabbar只能

    this.getTabBar().setData({

                    visible: val,

                })


    2022-07-06
    有用
    回复
  • healer
    healer
    2021-11-28

    2021.11还存在这个问题

    2021-11-28
    有用
    回复

正在加载...

请 登录 后发表内容
相关问题
相关文档