参考网址:https://blog.csdn.net/little_shallot/article/details/110205652
json文件里面加入"navigationStyle":"custom"即可去掉原生导航栏
既可在app.json中去掉,也可以在页面中json去掉
获取导航栏高度
用固定高度加定位,发现在不用设备下尺寸不对,就比如iPhone X那个刘海屏
Object wx.getMenuButtonBoundingClientRect()
获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。
bottom: 56 屏幕顶部到按钮底部之间的距离
height: 32 按钮高度
left: 226 屏幕左边到按钮左侧之间的距离
right: 313 屏幕左边到按钮右侧之间的距离
top: 24 屏幕顶部到按钮顶部之间的距离
width: 87 按钮宽度
总高度(红+蓝) = 状态栏高度(红)+(胶囊按钮top值 - 状态栏高度)*2 +胶囊按钮高度
导航栏高度(蓝) = 总高度 - 状态栏高度
获取系统信息
动态获取状态栏高度
wx.getSystemInfo({
success (res) {
console.log(res.statusBarHeight)
}
})
获取导航栏高度
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
success: res => {
let statusBarHeight = res.statusBarHeight;
// 导航栏高度
let navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
},
fail(err) {
console.log(err);
}
})
在index中自定义导航栏
********* 单位一定用px, 而不能用rpx
模板
<view class="container">
<view class="nav" style="height:{{height}}px">导航栏文本</view>
</view>
js
data: {
height: '',
},
onLoad() {
this.setData({
height: app.globalData.height
})
},