ios底部按钮被挡住

大家开发小程序时,需要在底部固定一个按钮时,却发现有时候被ios的小横条 (Home Indicator) 遮挡内容,有时候触发不了事件。

我们这边是用uniapp开发小程序

可以设置一个全局样式类

复制代码
.ios_bottom {
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom)!important;
  padding-bottom: env(safe-area-inset-bottom)!important;
  padding-bottom: max(env(safe-area-inset-bottom), 30rpx) !important;
}

env(safe-area-inset-bottom)在ios机型中大概是34px的距离,在安卓机型是0,所以需要有个max函数,取最大值。

给需要的区域增加这个样式,就不会被ios的小横条遮挡住了

相关推荐
FRing032 小时前
vue2干货总结7(自定义指令、插槽、单页应用程序、路由的使用(VueRouter))
开发语言·前端·vue.js·vue2
传奇开心果编程3 小时前
【Flutter踩坑排雷】第19课:路由硬编码坑|字符串路由书写错误,页面跳转失败排查
android·flutter·ios·移动开发·跨平台·ui框架·声明式ui
疯华整猫5 小时前
被杀掉之后:我把 Android 的「唤起 + 常驻」重做了一遍
前端·面试·架构
茶底世界之下6 小时前
雨后街口的斑马线:用 Awaking 把颜色让给光与步伐
ios·app·产品
IT_陈寒7 小时前
Java开发实战:从入门到精通
前端·人工智能·后端
风骏时光牛马8 小时前
生成一个AI转岗经历标题,只需要一个标题,不需要其他的任何文本。
前端
Csvn17 小时前
Monorepo
前端
Csvn17 小时前
流水线
前端
Csvn17 小时前
微前端架构
前端
Linux-lucky18 小时前
45-Linux学习之旅之防火墙与WEB加固
linux·前端·网络·学习·ubuntu