微信小程序自定义底部导航适配iPhone机型下面的小黑条

2,129 阅读1分钟
  • html判断是否是iphone机型
<view class="{{isIphoneX?'is-iphone':'botton_all'}}">

*css

.is-iphone {
 bottom: 2%;
 border-top: 1rpx solid #ddd;
 display: flex;
 position: fixed;
 width: 100%;
 align-items: center;
 justify-content: space-between;
 padding-top: 10rpx;
 background: #f4f4f4;
}

*js

 onLoad: function(options) {
 // iPhone -底部菜单处理调用
   this.checkPhone();
}
checkPhone() {
   let that = this;
   wx.getSystemInfo({
     success: function (res) {
       wx.getSystemInfo({
         success: function (e) {
           let modePhone = e.model;
           if (modePhone = modePhone.indexOf("iPhone") != -1 && modePhone.indexOf("X") != -1) { // 
             that.setData({
               isIphoneX: true
             })
           } else {
             that.setData({
               isIphoneX: false
             })
           }
         }
       })
       // console.log('--->', res)
     },
   })
 },