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

你们好,我是金金金。

场景

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

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

解决

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

代码

  1. 首先拿到需要的safeAreaInsets

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

测试

  • 微信开发者工具测试

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

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

总结

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

  • 编写有误还请大佬指正,万分感谢。
相关推荐
人工智能的苟富贵3 小时前
微信小程序直传阿里云 OSS 实践指南(V4 签名 · 秒传支持 · 高性能封装)
阿里云·微信小程序·小程序
时之彼岸Φ4 小时前
Fiddler+Yakit实现手机流量抓包和小程序抓包
智能手机·小程序·fiddler
换日线°4 小时前
微信小程序根据图片生成背景颜色有效果图
微信小程序
suncentwl5 小时前
为什么选择有版权的答题pk小程序
小程序·答题小程序·答题pk
小旋风012346 小时前
uniapp自定义头部(兼容微信小程序(胶囊和状态栏),兼容h5)
微信小程序·uni-app·notepad++
GalenZhang8888 小时前
Java生成微信小程序码及小程序短链接
java·微信小程序·小程序
浮桥9 小时前
uniapp -- 实现微信小程序、app、H5端视频上传
微信小程序·uni-app·音视频
说私域11 小时前
从大众传媒到数字生态:开源AI智能名片链动2+1模式S2B2C商城小程序驱动的营销革命
人工智能·小程序·开源·零售
换日线°11 小时前
微信小程序连续多个特殊字符自动换行解决方法
微信小程序
海拥12 小时前
《用Cursor和AI绘画24小时开发壁纸小程序》详细开发实录
微信小程序·cursor