/*** iphone6 的胶囊位置信息
* wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点
* 胶囊宽度： 87
* 胶囊高度： 32
* 胶囊左边界坐标： 278
* 胶囊上边界坐标： 26
* 胶囊右边界坐标： 365
* 胶囊下边界坐标： 58
* 状态栏高度：20*/
现胶囊上边距 = 胶囊上边界坐标 - 状态栏高度
现胶囊右边距 = 屏幕宽度 - 胶囊右边界坐标
现胶囊下边距 = 胶囊下边界坐标 - 胶囊高度 - 状态栏高度
导航栏高度 = 胶囊下边界坐标 + 现胶囊下边距
注意：胶囊下边界坐标包含了 状态栏、胶囊高度和状态栏和胶囊高度之间的距离，因为胶囊是居中在导航栏里的 ，所以上边距与下边距应该一致，所以是 胶囊下边界坐标 - 胶囊高度 - 状态栏高度。
const app = getApp(); Component({ properties: { navbarData: { // 由父页面传递的数据 type: Object, value: {}, observer: function (newVal, oldVal) { } } }, data: { haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false statusBarHeight: 0, // 状态栏高度 navbarHeight: 0, // 顶部导航栏高度 navbarBtn: { // 胶囊位置信息 height: 0, width: 0, top: 0, bottom: 0, right: 0 } }, // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度 attached: function () { let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度 let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息 /** * wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点 * 菜单按键宽度： 87 * 菜单按键高度： 32 * 菜单按键左边界坐标： 278 * 菜单按键上边界坐标： 26 * 菜单按键右边界坐标： 365 * 菜单按键下边界坐标： 58 */ let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点 height: headerPosi.height, width: headerPosi.width, // 胶囊top - 状态栏高度 top: headerPosi.top - statusBarHeight, // 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度） bottom: headerPosi.bottom - headerPosi.height - statusBarHeight, // 屏幕宽度 - 胶囊right right: app.globalData.systeminfo.screenWidth - headerPosi.right } let haveBack; if (getCurrentPages().length === 1) { // 当只有一个页面时 haveBack = false; } else { haveBack = true; } this.setData({ haveBack: haveBack, // 获取是否是通过分享进入的小程序 statusBarHeight: statusBarHeight, navbarHeight: headerPosi.bottom + btnPosi.bottom, // 原胶囊bottom + 现胶囊bottom navbarBtn: btnPosi }) }, methods: { _goBack: function () { wx.navigateBack({ delta: 1 }); }, _goHome: function () { wx.switchTab({ url: '/pages/index/index', }); } } })
通过 getCurrentPages() 来判断当前页面是否从分享页进入， 因为如果从分享页进入页面栈中应该只有一条数据，在跳转到其他页面时页面栈的length则会增加 ，在其他页面就会显示出返回和首页按钮。
注意：微信7.0.0支持wx.getMenuButtonBoundingClientRect()，如果想兼容低版本的微信，只能把导航栏的高度写死，通过一些大佬的计算得出的高度：
'iPhone': 64,
'iPhone X': 88,
'android': 68
具体查看：
https://developers.weixin.qq.com/community/develop/doc/0006c012dc8028f04b070dd0551004
如果你使用 wx.getMenuButtonBoundingClientRect()得到信息有小数 ，如下所示
{height: 24, width: 65.25, top: -0.5, bottom: -0.5, right: 101.25}
那么你可能是把开发工具中的视图缩放了，还原成100%就正常了。
headerNavbar.wxss