微信小程序底部适配iPhone机型-526互联

iphone新款机型底部有小黑条，这导致底部的tabBar会被遮挡，因此要做一下适配

关键: 放在 custom-tab-bar 的attached()中，也可放在 app.js 的onLaunch()中

要用到这个获取用户信息的api ? wx.getSystemInfo

data: {
    isPhoneModel: wx.getStorageSync('isPhoneModel') || false,
    bottomPadding: wx.getStorageSync('bottomPadding') || 0,
}
attached(){
    this.getPhoneInfo()
}
getPhoneInfo() {
    // 获取设备信息
    wx.setStorageSync('isPhoneModel', false)
    this.setData({
        isPhoneModel: false
    })
    wx.getSystemInfo({
        success: res => {
            let model = res.model;
            if (/iPhone/i.test(model)) {
                let bottomPadding = res.screenHeight - res.safeArea.bottom
                if (bottomPadding > 0) {
                    bottomPadding = bottomPadding + 18 // 按需求调整高度
                    wx.setStorageSync('isPhoneModel', true)
                    wx.setStorageSync('bottomPadding', bottomPadding)
                    this.setData({
                        isPhoneModel: true,
                        bottomPadding: bottomPadding
                    })
                }
            }
        },
        fail: err => {
            console.log('err', err)
        }
    })
}

重点

放在自定义 tabBar 的 custom-tab-bar 的index.html中

<cover-view class="tab-bar" style="padding-bottom: {{isPhoneModel ? bottomPadding : 20}}rpx;">

适配后