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

你们好,我是金金金。

场景

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

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

解决

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

代码

  1. 首先拿到需要的safeAreaInsets

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

测试

  • 微信开发者工具测试

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

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

总结

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

  • 编写有误还请大佬指正,万分感谢。
相关推荐
m0_5261194016 小时前
iconfont我修改好颜色,但是在小程序项目是黑色的
小程序
2601_9567436821 小时前
2026 上海小程序开发甄选:源码、云函数、跨端兼容技术评判
小程序·开发经验·上海
IT_张三21 小时前
CSDN-项目分享-暑期备考小程序
小程序
IsJunJianXin1 天前
pdd小程序 cdp 保存响应体
linux·服务器·小程序·pdd小程序·拼多多响应体解密·小程序cdp·拼多多rpc取响应体
Geek_Vison1 天前
APP瘦身实战:从80MB+砍到15MB——基于小程序容器技术剥离APP非核心业务的实践分享
小程序·uni-app·mpaas
weikecms1 天前
聚合返利CPS小程序快速搭建教程
人工智能·微信·小程序
Haibakeji2 天前
长沙餐饮门店点餐配送小程序定制开发
大数据·小程序
2501_915918412 天前
iOS App性能测试工具的实现方法与优化循环指南
android·ios·小程序·https·uni-app·iphone·webview
玩烂小程序2 天前
微信小程序手串DIY功能开发实录:飞入动画 + 环形排布 + 拖拽换序 + 旋转查看 + 保存设计
微信小程序
程序鉴定师2 天前
2026济南十大App制作公司测评(精简版):覆盖小程序、定制开发与跨平台方案
大数据·小程序