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

相关推荐
电子羊1 天前
Spec 编程工作流文档
前端
GISer_Jing1 天前
从CLI到GUI桌面应用——前端工程化进阶之路
前端·人工智能·aigc·交互
奶糖的次元空间1 天前
iOS 学习笔记 - SwiftUI 和 简单布局
ios·swift
还是大剑师兰特1 天前
Vue3 报错:computed value is readonly 解决方案
前端·vue.js
leaves falling1 天前
有效的字母异位词
java·服务器·前端
We་ct1 天前
LeetCode 35. 搜索插入位置:二分查找的经典应用
前端·算法·leetcode·typescript·个人开发
左耳咚1 天前
Claude Code 中的 SubAgent
前端·ai编程·claude
FPGA小迷弟1 天前
高频时钟设计:FPGA 多时钟域同步与时序收敛实战方案
前端·学习·fpga开发·verilog·fpga
IT古董1 天前
【前端】企业级前端调试体系设计(含日志埋点 + Eruda 动态注入 + Sentry)
前端·sentry
gis开发1 天前
cesium 中添加鹰眼效果
前端·javascript