小程序 iphone X 吸底按钮适配

问题图：

 

解决方法：

// app.js

App({  

  isIphoneX() {

    let isIphoneX = false

    wx.getSystemInfo({

      success: function(res) {

        isIphoneX = (res.model.indexOf('iPhone X') !== -1)

      }

    })

    return isIphoneX

  }

})

 

// tab-bar.js, 需要适配的页面

const app = getApp()

Page({

  data: {

    isIphoneX: app.isIphoneX()

  }

})

 

// tab-bar.wxml

<view class="tab-bar {{isIphoneX ? 'iphonex-tab-bar' : '' }}"></view>

 

// tab-bar.wxss

.tab-bar {

  position: fixed;

  left: 0;

  bottom: 0;

  width: 100%;

  background-color: #FFF;

  box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, .1);

}

.iphonex-tab-bar {

  content: ' ';

  position: fixed;

  bottom: 0;

  width: 100%;

  height: 68rpx;

  background: #FFF;

}

 

效果图：