uniapp自定view作为导航栏(隐藏导航栏,获取导航栏的高度)

1.在pages.json里面隐藏导航栏,{
"style": {
"navigationStyle":"custom",
"app-plus":{
"titleView":false
}
}
},
2.自定义一个view,当然需要知道view的高度需要用API获取状态栏的高度
data() {
return {
titleHeight: 0, //状态栏和导航栏的总高度
statusBarHeight: 0 ,//状态栏高度
naviBarHeight:0,//导航栏高度
}
},
onLoad() {
const res = uni.getSystemInfoSync()
const system = res.platform
this.statusBarHeight = res.statusBarHeight
if (system === 'android') {
this.titleHeight = (48 + this.statusBarHeight)
} else if (system === 'ios') {
this.titleHeight = (44 + this.statusBarHeight)
}
this.naviBarHeight = this.titleHeight - this.statusBarHeight
},
3.最后设置整个view的高度//注意单位是 'px'
<view class="naviBarView" :style="{height: titleHeight + 'px'}"></view>