Popup组件不能覆盖 Tabbar(fixed) 组件

[jiankian]

NutUI React 包名

@nutui/nutui-react

NutUI React 版本号

2.6.0

平台

weapp

重现链接

https://gitee.com/jiankian/AnnTaroNutUI-Test/blob/master/src/pages/index/index.tsx

重现步骤

NutUI的Popup展示时，无法覆盖Tabbar，zIndex也设置不了

期望的结果是什么？

Popup内容能覆盖住Tabbar

实际的结果是什么？

Tabbar一直在Popup之上

环境信息

No response

其他补充信息

代码结构把Popup写在Tabbar之后可以 但是zIndex方式无效

[xiaoyatong]

这个场景可以截个图看一下。为什么要盖住 tabbar

[arlequinfei]

我也是同样的问题，不过我使用的是vue

[dyxxxyd]

还有这个问题，微信开发工具预览会往右偏移了4

[xiaoyatong]

还有这个问题，微信开发工具预览会往右偏移了4

这个问题已提pr

[xiaoyatong]

  <>
    <Tabbar
      onSwitch={(value) => {
        console.log(value)
      }}
    >
      <Tabbar.Item title="首页" icon={<Home size={18} />} value={9} />
      <Tabbar.Item title="分类" icon={<Category size={18} />} />
      <Tabbar.Item title="发现" icon={<Find size={18} />} />
      <Tabbar.Item title="购物车" icon={<Cart size={18} />} />
      <Tabbar.Item title="我的" icon={<User size={18} />} />
    </Tabbar>
    <Popup zIndex={2000} visible={true} style={{ padding: '30px 50px' }} />
  </>

[ikeepo]

Tabbar被其他组件覆盖怎么处理，我看是说设置zIndex，但是Tabbar没有zIndex属性。

[oasis-cloud]

自定义的 tabbar 组件吗？如果是自定义 tabbar组件，tabbar 组件层级最高，无法通过 popup 遮盖。tabbar 样式控制可参考 taro 文档中的方法：

自定义 TabBar 比较特殊，要编译为自定义组件给小程序调用。因此会有样式隔离。

配置一下 addGlobalClass 即可：

NervJS/taro#11060

或参考 issue #857

[makai1027]

如果是自定义的tabbar，可以通过全局状态管理器控制tabbar的显示隐藏，或者利用框架提供的 hideTabBar方法，有点麻烦，不过能解决