微信小程序 ios 手机底部安全区适配
2023-12-15 04:48:12
在开发微信小程序中,遇到 IOS 全面屏手机,底部小黑条会遮挡页面按钮或内容,因此需要做适配处理。
解决方案
通过 wx.getSystemInfo()
获取手机系统信息,需要拿到:screenHeight(屏幕高度),safeArea(安全区域对象),pixelRatio(像素比)。然后通过计算,得到底部安全区的高度,动态设置底部元素的高度。
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 为例,pixelRatio
为 2,即:375px=750rpx
。
计算公式:底部安全区高度 = (屏幕高度 - 安全区域右下角纵坐标) * 像素比
,由此计算可得到底部安全区的高度,单位是 rpx。
动态设置底部安全区的高度:
<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
欢迎访问:天问博客
文章来源:https://blog.csdn.net/tiven_/article/details/134925933
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!