微信小程序 ios 手机底部安全区适配


字数:364 阅读时长:1分钟 阅读:85

在开发微信小程序中,遇到 IOS 全面屏手机,底部小黑条会遮挡页面按钮或内容,因此需要做适配处理。

微信小程序

解决方案

通过 wx.getSystemInfo() 获取手机系统信息,需要拿到:screenHeight(屏幕高度),safeArea(安全区域对象),pixelRatio(像素比)。然后通过计算,得到底部安全区的高度,动态设置底部元素的高度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Page({
data: {
bottomHeight: 0,
},
onLoad() {
this.safeAreaHandle()
},
async safeAreaHandle() {
let {
screenHeight,
pixelRatio,
safeArea: { bottom },
} = await wx.getSystemInfo()
this.setData({
bottomHeight: (screenHeight - bottom) * pixelRatio,
})
},
})

screenHeight 是指屏幕高度,单位为 px
safeArea.bottom 是指安全区域右下角纵坐标,单位为 px
pixelRatio 设备像素比。
iPhone 6/7/8 为例,pixelRatio2,即:375px=750rpx

计算公式:底部安全区高度 = (屏幕高度 - 安全区域右下角纵坐标) * 像素比 ,由此计算可得到底部安全区的高度,单位是 rpx

动态设置底部安全区的高度:

1
2
3
4
5
6
7
8
9
<template name="footer">
<view class="page-footer" style="padding-bottom:{{bottomHeight + 20 +'rpx' }}">
<view class="optional-li">
<view wx:for="{{labels}}" wx:key="labelCode" bindtap="clickLabel" data-args="{{item}}" class="opt-item">
{{item.labelName}}
</view>
</view>
</view>
</template>

参考文档:https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getSystemInfo.html


欢迎访问:天问博客

本文作者: Tiven
发布时间: 2023-11-19
最后更新: 2023-11-20
本文标题: 微信小程序 ios 手机底部安全区适配
本文链接: https://www.tiven.cn/p/54abeaa4/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^
个人邮箱: tw.email@qq.com
notification icon
博客有更新,将会发送通知给您!