思路:
明白一点,右上角的胶囊按钮是隐藏不了的,是固定在右上角的,也意味着自定义导航栏时候不用考虑它先在需要自定义导航栏的A页面,配置"navigationStyle":“custom”【全屏】,和window属性同级编写一个普通组件做为导航栏,高度X,甚至可以写一个搜索框在上面的。A页面引入该组件,写好位置(在最顶部),对准胶囊按钮的位置【最重要一步】计算高度X实现:
【navbar.html】我这个左上角是一个icon,跳往主页
<view class='nav' style='height:{{totalHeight}}px'><view class="nav-inner" style='height:{{totalHeight}}px;padding-top: {{statusBarHeight}}px;color:{{color}};background-color: {{bgColor}};'><view class='nav-back' style='height:{{totalHeight}}px;width:40rpx;padding-top: {{statusBarHeight}}px;margin-left:30rpx' bindtap="handleBack"><image src="https:///acf0a8c9-77a7-4a69-98ba-af879bb3057e.png" style="height:40rpx;width:40rpx"></image></view><text class='nav-title'>{{title}}</text></view></view>
【navbar.js】totalHeight数据我是从app实例拿来的,原因是不止一个自定义导航,所以写成公共的。只有一个点击icon的bindtap方法,比较简单,没什么代码可贴的
const {totalHeight, statusBarHeight, navBarHeight } = getApp().globalData.navbar
【app.js】重点讲怎么拿到上面的数据
先看这是配置了【全屏】的效果,是不是离上方【状态栏】还有距离?刘海旁边就是你手机个各种信息:时间、信号等。
其实我们只需要得到你手机状态栏高度就行了,导航栏用一个写死的高度。就这么简单(网上很多奇奇怪怪的高度公式,有啥用)为什么写死,也没见过平板的导航栏高度自适应变的很高吧?
那么就可以: 通过官方下面这个api获取状态栏高度
const res = wx.getSystemInfoSync()this.globalData.sysInfo = res// 设置navbar高度const statusBarHeight = res.statusBarHeight || 20; //状态栏高度this.globalData.navbar = {totalHeight: statusBarHeight + 42, //导航栏组件总高度statusBarHeight,navBarHeight: 42//肉眼以为的导航栏高度}
为什么有肉眼和总高度的说法,是因为你现在是全屏,你的组件是顶到了屏幕最上面,你得给状态栏留白的。其实就这么简单