想要实现自定义导航栏效果图如下
image.png
在code实现之前先敲黑板（了解一下需要的知识点）
image.png
由图我们可以看出
而可以通过
获取，现在就只用解决导航栏的高度了
观察发现，胶囊顶部高度距离航栏顶部高度的高度差 和 胶囊底部高度距导航栏底部高度的高度差 是一样的，也就是说
而 可以通过
获取，现在就只用解决高度差了
中也返回了胶囊顶部距屏幕顶部距离的信息（top）
所以知
具体实现：
1.先在pages.json中设置 navigationStyle 为 custom
image.png
- js 获取相关数据
// 获取导航栏的高度
export const computedNavHeight = () => {
// #ifdef MP-WEIXIN
if (wx.canIUse('getMenuButtonBoundingClientRect')) {
let sysInfo = wx.getSystemInfoSync();
//状态栏的高度
let statusBarHeight = sysInfo.statusBarHeight;
// 胶囊位置信息
let rect = wx.getMenuButtonBoundingClientRect();
let menuButtonRect = JSON.parse(JSON.stringify(rect));
// 导航栏高度
let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
// 自定义导航栏的高度
let height = (statusBarHeight + navBarHeight);
return {
statusBarHeight,
menuButtonRect,
navBarHeight,
height
}
} else {
wx.showToast({
title: '您的微信版本过低，界面可能会显示不正常',
icon: 'none',
duration: 4000
});
}
// #endif
}
-
html 设置相关
由于js方法是封装好的，所以需要在js里先引入在使用
image.png
image.png
