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

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

解决方案

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

js 复制代码
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

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

html 复制代码
<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


欢迎访问:天问博客

相关推荐
zluz_5 小时前
微信小程序,组件中使用全局样式
微信小程序·小程序
明月(Alioo)7 小时前
用AI帮忙,开发刷题小程序:微信小程序中实现Markdown图片解析与渲染功能详解
微信小程序·小程序·aigc
aiguangyuan9 小时前
微信小程序中的双线程模型及数据传输优化
微信小程序·前端开发
说私域12 小时前
技术指数变革下的组织适应性研究:基于定制开发开源AI智能名片S2B2C商城小程序的实践观察
人工智能·小程序·开源
笨笨狗吞噬者12 小时前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
sheji341613 小时前
【开题答辩全过程】以 《基于小程序的校内快递代取服务平台的设计与实现》为例,包含答辩的问题和答案
小程序
小小前端_我自坚强13 小时前
UniApp 微信小程序开发使用心得
面试·微信小程序·代码规范
右子18 小时前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
江城开朗的豌豆20 小时前
uni-app弹层遮罩难题?看我如何见招拆招!
前端·javascript·微信小程序
江城开朗的豌豆20 小时前
小程序生命周期漫游指南:从诞生到落幕的完整旅程
前端·javascript·微信小程序