微信小程序 - iPhoneX 刘海屏适配

西半球

已于 2022-04-20 11:25:07 修改

阅读量4.2k

点赞数 1

分类专栏：微信小程序文章标签：小程序微信小程序

于 2020-07-23 18:31:44 首次发布

本文链接：https://blog.csdn.net/iotjin/article/details/107544560

版权

微信小程序专栏收录该内容

37 篇文章 9 订阅

订阅专栏

GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类

小程序码

jh-weapp-demo

微信小程序适配 iPhone X 总结

方法一 js直接调用wx.getSystemInfoSync

底部
<view class='btn' style="padding-bottom:{{isIPhoneX ? 68 : 0}}rpx;" >底部</view>
1
判断是否是iPhoneX

const app = getApp()
 
Page({
  data: {
    isIPhoneX:false,
  },
  onLoad: function () {
    this.setData({
      "isIphoneX": this.isIphoneX()
    })
  },
  isIphoneX() {
   let res = wx.getSystemInfoSync();
   var safeBottom = res.screenHeight - res.safeArea.bottom
   //根据安全高度判断
   return  safeBottom === 34 ?true:false
  }
  
})

方法二 app.js 调用wx.getSystemInfoSync，设置全局变量, onLaunch 调用checkIsIPhoneX

  isIPhoneX: false, // 当前设备是否为 iPhone X

  // 判断设备是否为 iPhone X
  checkIsIPhoneX: function () {
    var that = this
    wx.getSystemInfo({
      success: function (res) {
        var safeBottom = res.screenHeight - res.safeArea.bottom
        that.kBottomSafeHeight = safeBottom
        //根据安全高度判断
        if (safeBottom === 34) {
          that.globalData.isIPhoneX = true
          that.isIPhoneX = true
        }
        // // 根据 model 进行判断
        // if (res.model.search('iPhone X') != -1) {
        //   that.globalData.isIPhoneX = true
        //   that.isIPhoneX = true
        // }
        // // 或者根据 screenHeight 进行判断
        // if (res.screenHeight == 812 || res.screenHeight == 896) {
        //   that.isIPhoneX = true
        // }
      }
    })
  },

js

var app = getApp();

  data: {
    isIPhoneX: app.isIPhoneX,
   }

wxml

<view class='{{isIPhoneX ? "footer-bg-IPhoneX ":"footer-bg"}}'>
</view>

wxss


.footer-bg {
  background: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
}

.footer-bg-IPhoneX {
  background: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  /* iPhone X 内容往上偏移 34px */
  padding-bottom: 68rpx;
}