一、效果圖
二、導(dǎo)航欄的組成
上面的導(dǎo)航欄主要由狀態(tài)欄（就是手機(jī)電量顯示欄）和小程序的導(dǎo)航欄組成，android手機(jī)一般為48px，ios手機(jī)一般為44px
三、開發(fā)步驟
1、設(shè)置navigationStyle:custom
{
"path": "pages/views/home/detail",
"style": {
"navigationStyle": "custom" ,// 隱藏系統(tǒng)導(dǎo)航欄
"navigationBarTitleText": "車況"
}
},
2、頁面導(dǎo)航欄div
<!-- 手機(jī)狀態(tài)欄高度 -->
<view :style="'height:'+statusBarHeight+'px'" class="wper100"></view>
<!-- 微信導(dǎo)航欄高度-->
<view :style="'height:'+navTitleHeight+'px'" class="wper100">
3、獲取statusBarHeight高度文章來源：http://www.zghlxwxcb.cn/news/detail-622241.html
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
4、獲取navTitleHeight的高度文章來源地址http://www.zghlxwxcb.cn/news/detail-622241.html
uni.getSystemInfo({
success: function(res) {
console.log(res.system); // 輸出操作系統(tǒng)名稱，如 iOS 14.5.1 或 Android 10.0.0
// 判斷手機(jī)是 iOS 還是 Android
if (res.system.indexOf('iOS') !== -1) {
console.log('手機(jī)是 iOS');
that.$store.commit("setNavTitleHeight",44);
// 在這里執(zhí)行 iOS 相關(guān)的邏輯
} else if (res.system.indexOf('Android') !== -1) {
console.log('手機(jī)是 Android');
// 在這里執(zhí)行 Android 相關(guān)的邏輯
that.$store.commit("setNavTitleHeight",48);
} else {
console.log('無法確定手機(jī)系統(tǒng)');
that.$store.commit("setNavTitleHeight",48);
}
}
});
到了這里，關(guān)于uni-app 微信小程序自定義導(dǎo)航欄的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
