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

你们好,我是金金金。

场景

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

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

解决

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

代码

  1. 首先拿到需要的safeAreaInsets

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

测试

  • 微信开发者工具测试

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

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

总结

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

  • 编写有误还请大佬指正,万分感谢。
相关推荐
意会2 小时前
微信闪照小程序实现
前端·css·微信小程序
小白_ysf4 小时前
uniapp 开发微信小程序,获取经纬度并且转化详细地址(单独封装版本)
微信小程序·uni-app
weixin_lynhgworld9 小时前
剧本杀小程序系统开发:构建剧本杀社交新生态
小程序
说私域9 小时前
基于定制开发开源 AI 智能名片 S2B2C 商城小程序的热点与人工下发策略研究
人工智能·小程序
weixin_lynhgworld9 小时前
陪诊小程序系统开发:让就医不再是一件难事
小程序
是一碗螺丝粉1 天前
拯救你的app/小程序审核!一套完美避开审核封禁的URL黑名单机制
前端·javascript·微信小程序
weixin_lynhgworld1 天前
盲盒抽谷机小程序系统开发:从0到1的完整方法论
小程序
weixin_lynhgworld1 天前
短剧小程序系统开发:赋能创作者,推动短剧艺术创新发展
小程序
一匹电信狗1 天前
【C++】异常详解(万字解读)
服务器·c++·算法·leetcode·小程序·stl·visual studio
我叫黑大帅1 天前
微信小程序分包:告别加载慢,像拆快递一样简单!
前端·微信小程序