小程序解决自定义导航栏--刘海屏自适应问题

小程序解决自定义导航栏–刘海屏自适应问题

今天做一个自定义的导航栏。iPhoneX和安卓的样式一直都是不一样，后面看了一些方法，解决了这个问题。

第一步（Json）

"navigationStyle": "custom"

第二步（app.js）

//全局变量globalData: {visit_history:[], //品牌浏览历史is_iphone:'',//苹果刘海适配statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],base_info:'',//全局基础信息，例如联系电话等},

第三步（页面）

<view class="custom flex_between" style="padding-top:{{statusBarHeight}}px"><view class='sizi ' catchtap='toMine' style='padding: 30rpx 30rpx;'><text>你好</text></view></view><view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

第四步（js）

const App = getApp()data:{statusBarHeight: App.globalData.statusBarHeight,}

第五步（css）

.custom{position: fixed;width: 100%;top: 0;left: 0;height: 45px;background: #fff;z-index: 999;border-bottom: 2rpx solid #eee;}.custom text{color: #333;font-size: 34rpx;font-weight: 700;max-width: 280rpx;}.empty_custom{height: 45px;width: 100%;}