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


欢迎访问:天问博客

相关推荐
Emma歌小白4 小时前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子4 小时前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918415 小时前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张6 小时前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差16 小时前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张17 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬18 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_9151063218 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI19 小时前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_1772972206920 小时前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧