微信小程序 iPhoneX底部安全区域(底部小黑条)适配

先看图:

在这里插入图片描述
在这里插入图片描述

借用一下网上的图,来详细解释下:
在这里插入图片描述

自定义tabbar,代码实现

tabbar采用定位,使用 top值 来决定tabbar显示

onLoad: function () {
    var statusH = wx.getSystemInfoSync().statusBarHeight;  // 状态栏高度
    var safetop = wx.getSystemInfoSync().safeArea.top;    // 安全区域距离顶部高度
    var safeH = wx.getSystemInfoSync().safeArea.height;   // 安全区域高度
    var topx = Math.ceil(( screenW / 750) * 120);    // tabbar 高度(120rpx转换成以像素为单位)
    console.log(screenH,safetop, safebtm, safeH)
    this.setData({
      statusBarH:statusH,     // 状态栏高度
      safeAreaH:safeH + safetop - topx,  // tabbar定位top高
    });
   
}

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值