?1.在需要自定義頭部頁面的json文件中添加(只是單頁改變当叭,所以只支持微信版本7.0以上)
"navigationStyle":"custom"
2.在自定義頭部的頁(wxml)寫布局樣式:
<view?style="podition:relative;height:{{statusHeight?+?navHeight}}px">??
??<view?class="page-title"?style="height:{{statusHeight}}px;position:fixed;top:0;left:0;z-index:9999;width:100%;"></view>
??<view?class="page-title"?style="height:{{navHeight}}px;position:fixed;top:{{statusHeight}}px;left:0;z-index:9999;">
????<van-icon?name="arrow-left"??size="25px"?bindtap="toBack"/>
????<view?class="{{isIOS??'header-title':''}}"?>{{title}}</view>
??</view>
</view>
3.通過wx.getSystemInfoSync()獲取系統(tǒng)信息計算導(dǎo)航欄高度
//通過獲取系統(tǒng)信息計算導(dǎo)航欄高度
??setNavHeight(){
????const?sysInfo?=?wx.getSystemInfoSync()
????const?statusHeight?=?sysInfo.statusBarHeight
????const?isIOS?=?sysInfo.system.indexOf('iOS')?>?-1? ? //判斷是否為ios系統(tǒng)
????let?navHeight;
????if(?!isIOS?){
??????navHeight?=?48
????}else{
??????navHeight?=?44
????}
????this.setData({
??????statusHeight,
??????navHeight,
??????isIOS
????})
??}
??}
4.在加載階段執(zhí)行?this.setNavHeight()(頁面上在onLoad階段;組件在attached階段)