微信小程序 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 为例,pixelRatio2,即: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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。