小程序 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;

}

效果图：