想要實現(xiàn)自定義導(dǎo)航欄效果圖如下
image.png
在code實現(xiàn)之前先敲黑板（了解一下需要的知識點）
image.png
由圖我們可以看出
而可以通過
獲取，現(xiàn)在就只用解決導(dǎo)航欄的高度了
觀察發(fā)現(xiàn)，膠囊頂部高度距離航欄頂部高度的高度差 和 膠囊底部高度距導(dǎo)航欄底部高度的高度差 是一樣的，也就是說
而 可以通過
獲取，現(xiàn)在就只用解決高度差了
中也返回了膠囊頂部距屏幕頂部距離的信息（top）
所以知
具體實現(xiàn)：
1.先在pages.json中設(shè)置 navigationStyle 為 custom
image.png
- js 獲取相關(guān)數(shù)據(jù)
// 獲取導(dǎo)航欄的高度
export const computedNavHeight = () => {
// #ifdef MP-WEIXIN
if (wx.canIUse('getMenuButtonBoundingClientRect')) {
let sysInfo = wx.getSystemInfoSync();
//狀態(tài)欄的高度
let statusBarHeight = sysInfo.statusBarHeight;
// 膠囊位置信息
let rect = wx.getMenuButtonBoundingClientRect();
let menuButtonRect = JSON.parse(JSON.stringify(rect));
// 導(dǎo)航欄高度
let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
// 自定義導(dǎo)航欄的高度
let height = (statusBarHeight + navBarHeight);
return {
statusBarHeight,
menuButtonRect,
navBarHeight,
height
}
} else {
wx.showToast({
title: '您的微信版本過低，界面可能會顯示不正常',
icon: 'none',
duration: 4000
});
}
// #endif
}
-
html 設(shè)置相關(guān)
由于js方法是封裝好的，所以需要在js里先引入在使用
image.png
image.png
