s***@qq.com
s***@qq.com
  • 发布:2019-12-19 16:22
  • 更新:2021-01-19 10:39
  • 阅读:3108

iOS tabbar毛玻璃适配

分类:uni-app

一直对iOS的毛玻璃效果很热衷,体验也确实不错。Android平台虽然也能实现,但是效果感觉一直没有iOS好,而且用的App好像也不多。
最近在用flutter写地图应用,flutter对毛玻璃支持较好。但是我的应用是一个地图应用,想在地图上面覆盖一层毛玻璃,显示一些图标文字,想想挺漂亮,居然实现不了。估计和地图是platformview有关系。

看到官方在最新的版本中加入了iOS tabbar毛玻璃效果,立马拿过来用一用。
发现一个问题:之前全局设置了安全区域safearea,iPhoneX等刘海机型能很好的适配。
现在为了毛玻璃效果,需要去掉safeara底部适配,这是全局性质的,导致其他页面都没有safeara底部适配了,每个页面都需要单独设置,挺麻烦。

没办法,只能每个页面单独设置了,下面是我的方法,有点麻烦。小伙伴有更好的方法希望能分享一下哦~
最外面的一个container加个padding,如果底部有悬浮按钮,为了避免在按钮下面穿透,需要也加个padding。

<view class="container"></view>  
  
.container {  
  padding-bottom: 0;  
  padding-bottom: constant(safe-area-inset-bottom);  
  padding-bottom: env(safe-area-inset-bottom);  
}  
  
# 如果底部有悬浮按钮,需要这样处理,加一个padding  
  
.bottom-review {  
  background-color: white;  
  position: fixed;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  display: flex;  
  align-items: center;  
  padding: 10px 10px;  
  padding-bottom: constant(safe-area-inset-bottom);  
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);  
  border-top: #f6f6f6 solid 1px;  
}

这是效果图:

1 关注 分享
DCloud_iOS_XHY

要回复文章请先登录注册

谭小谭

谭小谭

回复 DCloud_heavensoft :
啥时候搞一个安卓的啊,大佬
2021-01-19 10:39
谭小谭

谭小谭

回复 DCloud_iOS_XHY :
尽快搞一个安卓的啊,大神
2021-01-19 10:38
DCloud_heavensoft

DCloud_heavensoft

回复 DCloud_iOS_XHY :
2.4.8起已经提供了,iOS平台,nvue页面,任意view都可以设置高斯模糊,https://ask.dcloud.net.cn/article/36617#view
2019-12-31 21:12
s***@qq.com

s***@qq.com (作者)

回复 今天回复我了吗 :
白色是底部按钮所在的容器,按钮的样式没有贴出来
2019-12-31 21:04
今天回复我了吗

今天回复我了吗

background-color: white; 为啥图是红色的0.0
2019-12-25 11:44
DCloud_iOS_XHY

DCloud_iOS_XHY

厉害了,uni官方正在做一个高斯模糊的组件,之后可以实现任意视图添加毛玻璃效果
2019-12-19 17:51