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的小横条遮挡住了

相关推荐
梦想很大很大5 分钟前
使用 Go + Gin + Fx 构建工程化后端服务模板(gin-app 实践)
前端·后端·go
We་ct7 分钟前
LeetCode 56. 合并区间:区间重叠问题的核心解法与代码解析
前端·算法·leetcode·typescript
张3蜂14 分钟前
深入理解 Python 的 frozenset:为什么要有“不可变集合”?
前端·python·spring
无小道15 分钟前
Qt——事件简单介绍
开发语言·前端·qt
广州华水科技17 分钟前
GNSS与单北斗变形监测技术的应用现状分析与未来发展方向
前端
code_YuJun40 分钟前
corepack 作用
前端
千寻girling40 分钟前
Koa.js 教程 | 一份不可多得的 Node.js 的 Web 框架 Koa.js 教程
前端·后端·面试
全栈前端老曹41 分钟前
【MongoDB】Node.js 集成 —— Mongoose ORM、Schema 设计、Model 操作
前端·javascript·数据库·mongodb·node.js·nosql·全栈
code_YuJun42 分钟前
pnpm-workspace.yaml
前端
天才熊猫君1 小时前
“破案”笔记:iframe动态加载内容后,打印功能为何失灵?
前端