youzan / vant-weapp

轻量、可靠的小程序 UI 组件库
https://vant.pro/vant-weapp/
MIT License
17.77k stars 3.48k forks source link

[Bug Report] ActionSheet 在自定义tab的页面被遮挡 #4595

Closed xCss closed 2 years ago

xCss commented 3 years ago

设备

iOS15.x

VantWeapp 版本

1.9.2

基础库版本

2.19.3

如果是 UI 问题,截图链接(多图回车分隔)

截图

请提供核心代码片段链接

描述问题

ActionSheet 在自定义tab的页面被Tab遮挡

nemo-shen commented 2 years ago

从组件角度来说,<Tabbar /><ActionSheet /> 之间并没有明确的依赖关系,都是同一等级的组件,因此不能因为页面有一个自定义组件,而这个组件恰巧叫做 <Tabbar /> 而故意抬高 <ActionSheet /> 同样的例子还有 <Popup />

微信原生tabbar为什么可以抬高组件?

因为从微信的角度来说,原生组件优先级永远高于自定义组件,所以我们可到类似canvas原生组件层级问题这样的bug。微信的tabbar实际是从视窗层面,将视窗缩小了,你可以理解为上面是一个iframe,下面是你自定义的tabbar,所以他能做到

解决方案

  1. <ActionSheet /> 提供了 z-index 属性,你可以尝试加大 z-index 值,使其在唤起的时候层级高于自定义的 <Tabbar />
  2. 如果你在唤起时也需要展示 <Tabbar /> 那么可以考虑自行给 <ActionSheet /> 增加一个 padding-bottom 利用 custom-class
chenjiahan commented 2 years ago

@nemo-shen 我看 ActionSheet z-index 默认是 100,Tabbar 默认是 1,按理说不会出现图片上的问题,这个可以看看原因

yxyufo110 commented 1 year ago

使用custom-tab-bar 替代原生组件的tabbar的时候确实有这个问题