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()获取系统信息计算导航栏高度
//通过获取系统信息计算导航栏高度
setNavHeight(){
const sysInfo = wx.getSystemInfoSync()
const statusHeight = sysInfo.statusBarHeight
const isIOS = sysInfo.system.indexOf('iOS') > -1 //判断是否为ios系统
let navHeight;
if( !isIOS ){
navHeight = 48
}else{
navHeight = 44
}
this.setData({
statusHeight,
navHeight,
isIOS
})
}
}
4.在加载阶段执行 this.setNavHeight()(页面上在onLoad阶段;组件在attached阶段)