IOS兼容 - uniapp ios固定定位失效与刘海屏的坑

问题描述

uniapp 一套代码,打包之后安卓可以正常显示版本号,IOS不可以

错误现象:IOS只有滚动到屏幕底部才能看到版本号

原因分析:

IOS设计更希望屏幕跟随着用户滚动而滚动,所以无法实现相对浏览器窗口的固定定位。
IOS实现的功能是相对最近的允许滚动的元素定位,且不能遮罩滚动元素的兄弟吉父元素的兄弟元素。

一般情况:

固定定位是相对于浏览器窗口,且可以使页面中的某个元素不随浏览器的滚动而消失

IOS固定定位

固定定位相对于滚动元素,且可以随着屏幕滚动而消失

IOS的固定定位等同于它是相对滚动元素固定位置(类似于absolute定位)

解决方案:

如果需要浏览器的窗口定位,需要保证当前父元素不能添加滚动样式,才可实现固定定位。

将需要固定(position:fixed)的元素放在拥有滚动元素的外面即可,例如旋转transform/滚动条/轮播图scroll-view组件等等。

方案一:直接看成absolete定位,相对body作为父元素,使用绝对定位定位进行定位(较为繁杂)

方案二:隔离处理

将需要滚动的主体和固定的部分,分别用两个容器去写即可。

javascript 复制代码
 <body>
     <div class='warper'>
         <div class='main'></div>
     <div>
     <div class="bottom"></div>
 </body>
javascript 复制代码
css部分
.main{
      overflow-y: scroll;
 }
.bottom{ 
    position:fixed;
    bottom:0;
    width: 100%;
}

总结:

  1. fixed在某些情况下可能导致容器内的子元素的1px边框线消失,即使使用z-index也无法解决。

    解决方法:可以使用translateZ属性来解决

  2. ios下,fixed定位的容器内不能带有input等可以唤起键盘的元素。

    解决方法: 在input聚焦唤起键盘时会去掉fixed定位状态,改为absolute。

  3. 尽量不要在可滚动的容器内包含fixed定位的子元素且ios不支持onresize事件

参考文章:https://blog.csdn.net/surui0419/article/details/128082238

https://blog.csdn.net/weixin_34357887/article/details/88016424

相关推荐
开发者小天12 分钟前
uniapp中封装底部跳转方法
前端·javascript·uni-app
Q_Q196328847532 分钟前
python+uniapp基于微信小程序的医院陪诊预约系统
开发语言·spring boot·python·微信小程序·django·flask·uni-app
2501_915909061 小时前
Python 爬虫 HTTPS 实战,requests httpx aiohttp 抓取技巧、证书问题与抓包调试全流程
爬虫·python·ios·小程序·https·uni-app·iphone
Sun Peng4 小时前
【uniapp】uniapp+uview-ui+mixins实现搜索+上拉加载+加载动画功能:
ui·uni-app
00后程序员张5 小时前
iOS 开发环境搭建完整指南 Xcode 安装配置、iOS 开发工具选择、ipa 打包与 App Store 上架实战经验
android·macos·ios·小程序·uni-app·iphone·xcode
Q_Q5110082855 小时前
python+springboot+uniapp基于微信小程序的停车场管理系统 弹窗提示和车牌识别
vue.js·spring boot·python·django·flask·uni-app·node.js
折七7 小时前
expo sdk53+ 集成极光推送消息推送 ios swift
前端·javascript·ios
猪哥帅过吴彦祖7 小时前
Flutter 系列教程:布局基础 (上) - `Container`, `Row`, `Column`, `Flex`
前端·flutter·ios
90后的晨仔8 小时前
xcode 16 删除 Provisioning Profiles 文件的有效路径
ios
-晨-风-9 小时前
Flutter 运行IOS真机,提示无法打开“****”
flutter·ios