search

alibaba / rax

🐰 Rax is a progressive framework for building universal application. https://rax.js.org
Other
8k stars 627 forks source link

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

Open xmsz opened 2 years ago

xmsz commented 2 years ago

背景

SoloJiang commented 2 years ago

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

xmsz commented 2 years ago

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

优先级这个没问题

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

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

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

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

SoloJiang commented 2 years ago

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

xmsz commented 2 years ago

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

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

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

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

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