微信小程序:解决顶部被遮挡的问题

你们好,我是金金金。

场景

发布了一个小程序,测试过程当中,发现问题:顶部的轮播图被IOS的灵动岛给挡住了

好家伙,确实不太美观昂~

解决

解决微信小程序元素内容被顶部栏遮挡的问题也非常简单
uniapp提供了一个同步接口函数:uni.getSystemInfoSync(),这玩意会返回一堆东西,拿到safeAreaInsetssafeAreaInset官方说明:在竖屏正方向下的安全区域插入位置,意思呢就是它能获取到设备的安全区域 直接排除掉这个安全区域的高度那么就不会存在遮挡问题
文档:https://uniapp.dcloud.net.cn/api/system/info.html#safearea

代码

  1. 首先拿到需要的safeAreaInsets

  2. 在元素上padding对应的高度即可

测试

  • 微信开发者工具测试

可以看到,顶部其实已经被隔离开了 没有被压住了

  • 真机俺也测试了,就不贴图了~

总结

内容被顶部栏遮挡了,排除掉对应区域即可~

  • 编写有误还请大佬指正,万分感谢。
相关推荐
我很苦涩的44 分钟前
使用微信小程序实现多格验证码效果
微信小程序·小程序
阿里花盘1 小时前
花店微信小程序怎么做,创建一个小程序需要多少钱
微信小程序·小程序
2501_916008891 小时前
没有源码如何加密 IPA 实战流程与多工具组合落地指南
android·ios·小程序·https·uni-app·iphone·webview
LXA08093 小时前
UniApp 小程序中使用地图组件
小程序·uni-app·notepad++
bug总结4 小时前
更新原生小程序封装(新增缓存订阅)完美解决
前端·缓存·小程序
2501_933509076 小时前
无锡制造企税惠防错指南:知了问账帮守政策红利线
大数据·人工智能·微信小程序
汤姆yu8 小时前
基于微信小程序的智慧社区娱乐服务管理平台
微信小程序·娱乐
2501_915909069 小时前
Flutter 应用怎么加固,多工具组合的工程化实战(Flutter 加固/Dart 混淆/IPA 成品加固/Ipa Guard + CI)
android·flutter·ios·ci/cd·小程序·uni-app·iphone
千寻技术帮11 小时前
50013_基于微信小程序的校园志愿者系统
mysql·微信小程序·springboot·文档·ppt
2501_9159090612 小时前
深入理解HTTPS和HTTP的区别、工作原理及安全重要性
安全·http·ios·小程序·https·uni-app·iphone