微信小程序 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


欢迎访问:天问博客

相关推荐
2501_915106324 小时前
iOS 26 APP 性能测试实战攻略:多工具组合辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
巨神峰SEO7 小时前
支付宝小程序 SEO 实战:鲜花送达类小程序抢占搜索流量指南
小程序·支付宝小程序排名优化·支付宝小程序seo·支付宝小程序排名·支付宝优化
凉辰8 小时前
微信小程序uni.request 返回值存在精度丢失问题
微信小程序·小程序
李慕婉学姐8 小时前
【开题答辩过程】以《基于微信小程序教学评价平台的设计与实现》为例,不会开题答辩的可以进来看看
微信小程序·小程序
计算机学姐8 小时前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
weixin_lynhgworld11 小时前
剧本杀小程序系统开发:内容生态与商业模式的双轮驱动
大数据·小程序
博客zhu虎康11 小时前
微信小程序报错 ubepected character `的style换行问题
微信小程序
计算机徐师兄12 小时前
Java基于SpringBoot的农场管理系统小程序【附源码、文档说明】
java·微信小程序·小程序·农场管理系统小程序·java农场管理系统小程序·java农场管理系统微信小程序·农场管理微信小程序
00后程序员张12 小时前
iOS混淆与IPA文件加固全流程实战 防止苹果应用被反编译的工程级方案
android·ios·小程序·https·uni-app·iphone·webview
云霄IT13 小时前
新版电脑微信4.1.x.x小程序逆向之——寻找小程序存放位置目录和__APP__.wxapkg
java·微信·小程序