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

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

今天做一个自定义的导航栏。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%;
}