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

你们好,我是金金金。

场景

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

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

解决

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

代码

  1. 首先拿到需要的safeAreaInsets

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

测试

  • 微信开发者工具测试

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

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

总结

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

  • 编写有误还请大佬指正,万分感谢。
相关推荐
The_era_achievs_hero6 分钟前
微信小程序71~80
微信小程序·小程序
dssxyz1 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
!win !2 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
澄江静如练_5 小时前
微信小程序发体验版
微信小程序·小程序
流口水的兔子9 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记10 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~1833994812111 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero13 小时前
微信小程序61~70
微信小程序·小程序
编程猪猪侠14 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
汤姆yu1 天前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序