在小程序開發(fā)的時候會遇到一些頁面不需要頭部導(dǎo)航酬凳，或像淘寶的商品詳情一樣自定義的導(dǎo)航欄互纯。那先要清楚這導(dǎo)航可不能寫死尚蝌，每種手機(jī)的導(dǎo)航都各不相同迎变。
一、在app.json的window對象中定義導(dǎo)航的樣式：
小程序開發(fā)文檔中說明
"window":{
"navigationStyle": "custom"
},
這樣你會發(fā)現(xiàn)所有頁面的導(dǎo)航欄都不見了飘言。如果還有其他頁面需要導(dǎo)航欄的衣形，那就模仿小程序的導(dǎo)航欄按照以下步驟。
二姿鸿、首先要在app.js的onLaunch方法里面獲取手機(jī)狀態(tài)欄高度谆吴，全局定義導(dǎo)航高度navHeight：
// 獲取手機(jī)系統(tǒng)信息
wx.getSystemInfo({
success: res => {
//導(dǎo)航高度
this.globalData.navHeight = res.statusBarHeight + 46;
}, fail(err) {
console.log(err);
}
})
注意！？猎ぁ句狼！全局定義導(dǎo)航高度navHeight！Ｈ饶场腻菇！
我發(fā)現(xiàn)很多人會遇到navHeight是undefined這個問題。在這里說明一下昔馋，這個navHeight需要在app.json里面定義好：
globalData: {
userInfo: null,
navHeight: 0
}
三筹吐、在需要導(dǎo)航的 頁面Page拿到全局變量導(dǎo)航高度：
const App = getApp();
Page({
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
this.setData({
navH: App.globalData.navHeight
})
},
})
四、頁面展示：
<view>
<view class='nav bg-white' style='height:{{navH}}px'>
<view class='nav-title'>
首頁
<image src='../../images/back.png' mode='aspectFit' class='back' bindtap='navBack'></image>
</view>
</view>
<scroll-view class='bg-gray overflow' style='height:calc(100vh - {{navH}}px)' scroll-y >
<view class='hidden'>
<!-- 正文 -->
</view>
</scroll-view>
</view>
五秘遏、附上樣式丘薛，可以寫在app.wxss：
.nav{
width: 100%;
overflow: hidden;
position: relative;
top: 0;
left: 0;
z-index: 10;
}
.nav-title{
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
font-family:PingFang-SC-Medium;
font-size:36rpx;
letter-spacing:2px;
}
.nav .back{
width: 22px;
height: 22px;
position: absolute;
bottom: 0;
left: 0;
padding: 10px 15px;
}
.bg-white{
background-color: #ffffff;
}
.bg-gray{
background-color: #f7f7f7;
}
.overflow{
overflow: auto;
}
.hidden{
overflow: hidden;
}
六、界面效果：
iphone6界面效果
iphoneX界面效果
