Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Question]如何解决弹窗被TabBar盖住 #2338

Open
xmsz opened this issue Apr 8, 2022 · 4 comments
Open

[Question]如何解决弹窗被TabBar盖住 #2338

xmsz opened this issue Apr 8, 2022 · 4 comments

Comments

@xmsz
Copy link

xmsz commented Apr 8, 2022

背景

  • 使用弹窗组件,例如Select
  • 会被tabbar盖住

image

@SoloJiang
Copy link
Collaborator

TabBar 是以容器框架的维度提供的,所以从设定上就是要比任意元素优先级更高的

@xmsz
Copy link
Author

xmsz commented May 16, 2022

TabBar 是以容器框架的维度提供的,所以从设定上就是要比任意元素优先级更高的

优先级这个没问题

主要是 我这个Select里面的内容被挡住了,然后又由于是fusion mobile 组件,我自己也办法做适配

然后在小程序里是没问题,因为他是直接占用了空间而不是盖住

预期是可以对这个情况适配一下,比如在web端,设定一个tabbar高度的变量
然后在fusion mobile组件里 涉及弹窗的都自动把这个高度顶上去

不然现在这种情况,带tabbar的web端,在tabbar页面没办法使用像Select这样的组件

@SoloJiang
Copy link
Collaborator

后面说的这种耦合式的设计其实是不合理的,可以具体说下占用空间相关的预期表现,这种场景是不是用自定义 TabBar 然后将 TabBar 隐藏比较好?

@xmsz
Copy link
Author

xmsz commented May 24, 2022

后面说的这种耦合式的设计其实是不合理的,可以具体说下占用空间相关的预期表现,这种场景是不是用自定义 TabBar 然后将 TabBar 隐藏比较好?

如果改动到meet组件这种耦合确实不太好

占用空间表现就是,视窗分为内容区和tabbar区,整体高度100vh的flex布局,且内容区的层级高于tabbar。这样内容区的任何元素就不会被盖住。但缺点也很明显就是限制了页面的高度会影响其他表现

所以我也没想到什么好的解决办法 目前就是硬写(web端情况下)

  1. 用css覆盖meet组件弹窗层级
  2. 用css覆盖tabbar层级
  3. 自己写的弹窗增加了一个「安全高度」占位。类似于safe-area-inset
  4. tabbar页的弹出时 隐藏tabbar

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants