一、在app.json的window對象中定義導航的樣式：
小程序開發文檔中說明
"window":{ "navigationStyle": "custom" }, 這樣你會發現所有頁面的導航欄都不見了。如果還有其他頁面需要導航欄的，那就模仿小程序的導航欄按照以下步驟。
二、首先要在app.json的onLaunch方法里面獲取手機狀態欄高度，全局定義導航高度navHeight：
// 獲取手機系統信息 wx.getSystemInfo({ success: res => { //導航高度 this.globalData.navHeight = res.statusBarHeight + 46; }, fail(err) { console.log(err); } }) 注意！！！全局定義導航高度navHeight！！！
我發現很多人會遇到navHeight是undefined這個問題。在這里說明一下，這個navHeight需要在app.json里面定義好：
globalData: { userInfo: null, navHeight: 0 } 三、在需要導航的 頁面Page拿到全局變量導航高度：
const App = getApp(); Page({ /** * 生命周期函數--監聽頁面加載 */ 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界面效果