小程序解决自定义导航栏–刘海屏自适应问题
今天做一个自定义的导航栏。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%;}