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

相关推荐
初级代码游戏4 分钟前
iOS开发 SwiftUI 8:NavigationView 导航
ios·swiftui·swift
Apifox.7 分钟前
测试用例越堆越多?用 Apifox 测试套件让自动化回归更易维护
运维·前端·后端·测试工具·单元测试·自动化·测试用例
玉梅小洋22 分钟前
Chrome设置链接自动跳转新标签页而不是覆盖
前端·chrome
EndingCoder28 分钟前
反射和元数据:高级装饰器用法
linux·运维·前端·ubuntu·typescript
Marshmallowc32 分钟前
React性能优化:useState初始值为什么要用箭头函数?深度解析Lazy Initialization与Fiber机制
前端·react.js·性能优化·前端框架·react hooks
Coder_Boy_35 分钟前
基于SpringAI的在线考试系统-试卷管理模块完整优化方案
前端·人工智能·spring boot·架构·领域驱动
摇滚侠40 分钟前
Node.js 零基础教程,Node.js 和 NPM 的安装与使用
前端·npm·node.js
谢尔登44 分钟前
Vue3架构设计——调度系统
前端·javascript·vue.js
码农研究僧1 小时前
ruoyi+vue2的前端Demo(不分页、前端分页、后端分页)
前端·vue2·ruoyi
Kratzdisteln1 小时前
【1902】0121-1 Dify工作流节点详细配置(方案B最终版)
java·前端·javascript