要自定義導(dǎo)航欄瞳脓，首先需要在app.json里設(shè)置：
{
"window": {
"navigationStyle": "custom"
}
}
設(shè)置之后進(jìn)入小程序就只剩下右上角的膠囊了句狼。
在設(shè)置導(dǎo)航欄樣式時需要知道它的高度，在app.json的onLaunch里獲取狀態(tài)欄高度：
App({
onLaunch: function(options) {
wx.getSystemInfo({
success: (res) => {
this.globalData.statusBarHeight = res.statusBarHeight
this.globalData.navBarHeight = 44 + res.statusBarHeight
}
})
},
globalData: {
statusBarHeight: 0,
screenHeight: 0
}
})
44是導(dǎo)航欄除去狀態(tài)欄的高度，單位px褐荷。
因為導(dǎo)航欄每個頁面都會用到，所以我們用組件會方便使用一些嘹悼，這里創(chuàng)建一個叫nav的組件：
首先在組件js里設(shè)置statusBarHeight和一個可以通過外部設(shè)置狀態(tài)欄顏色的backgroundColor的屬性叛甫，默認(rèn)透明。
nav.js:
const app = getApp()
Component({
options: {
multipleSlots: true
},
properties: {
backgroundColor:{
type: String,
value: 'rgba(0,0,0,0)'
}
},
data: {},
ready() {
let {
statusBarHeight,
navBarHeight
} = app.globalData;
this.setData({
statusBarHeight,
navBarHeight
})
},
methods: {
back() {
wx.navigateBack({
delta:1
})
}
}
})
content里放置內(nèi)容杨伙，返回按鈕固定在左邊其监。
nav.wxml:
<view class='nav-wrap' style="background-color:{{bgColor}};">
<view style="height:{{statusBarHeight}}px;"></view>
<view class='content'>
<slot name="content"></slot>
<view class='back' bindtap='back'></view>
</view>
</view>
nav.wxss:
.nav-wrap {
position: fixed;
top: 0;
left: 0;
width: 750rpx;
z-index: 1;
}
.content {
position: relative;
width: 100%;
height: 44px;
}
.back {
position: absolute;
left: 0;
top: 0;
width: 88px;
height: 44px;
background: pink;
}
在頁面中使用：
<nav bgColor="black">
<view slot="content">
<view class='txt'>Nav title</view>
</view>
</nav>
<view>page content</view>
效果圖：
這里txt里的樣式、內(nèi)容都是可以自定義的缀台，如果想要使用通用樣式棠赛，可以寫在組件里。
比如把導(dǎo)航欄title放在組件里，通過外部傳值設(shè)置：
nav.js:
Component({
// ...
properties: {
title:{
type: String,
value: ''
}
},
// ...
})
nav.wxml:
<view class='nav-wrap' style="background-color:{{bgColor}};">
<view style="height:{{statusBarHeight}}px;"></view>
<view class='content'>
<view class="title">{{title}}</view>
<view class='back' bindtap='back'></view>
</view>
</view>
nav.wxss:
/* ... */
.title {
color: white;
text-align: center;
line-height: 44px;
font-weight: 500;
}
/* ... */
調(diào)用<nav bgColor="black" title="hello">就可以了睛约。
在第一次使用nav組件的頁面代碼中鼎俘，page content是看不見的，因為是直接從狀態(tài)欄開始顯示的辩涝，被nav擋住了贸伐。
這里可以加一個高度為導(dǎo)航欄高度的view當(dāng)做頂部padding：
nav.wxml
<view class='nav-wrap' style="background-color:{{bgColor}};">
<view style="height:{{statusBarHeight}}px;"></view>
<view class='content'>
<view class="title">{{title}}</view>
<view class='back' bindtap='back'></view>
</view>
</view>
<view wx:if="{{hastop}}" class='padding' style="width:100;height:{{navBarHeight}}px;"></view>
這里在properties里設(shè)置了一個hastop，用來控制是否有頂部padding怔揩。
頁面中：
<nav bgColor="black" title="Nav title" hastop></nav>
<view>page content</view>
這樣就可以顯示出來了：
導(dǎo)航欄背景圖
還可以做導(dǎo)航欄背景圖捉邢，添加一個image，絕對定位放置在nav-wrap底部：
nav.wxml
<view class='nav-wrap' style="background-color:{{bgColor}};">
<image class='bgimg' wx:if="{{bgsrc}}" src='{{bgsrc}}' mode='aspectFill'></image>
<view style="height:{{statusBarHeight}}px;"></view>
<view class='content'>
<view class='title'>{{title}}</view>
<view class='back' bindtap='back'></view>
</view>
</view>
<view wx:if="{{hastop}}" class='padding' style="width:100;height:{{navBarHeight}}px;"></view>
nav.wxss
.bgimg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
頁面：
<nav bgColor="black" title="Nav title" hastop bgsrc="/images/bg.jpeg"></nav>
<view>page content</view>
全屏背景
將bgColor商膊、hastop伏伐、bgsrc都去掉，在頁面中放置一個position: fixed;晕拆，并且鋪滿全屏的圖片藐翎。
<nav title="Nav title"></nav>
<image class='pagebg' src='/images/bg.jpeg' mode='aspectFill'></image>
back的內(nèi)容自定義就行了，我這里只是簡單放置了一個色框实幕。
注意事項
官方文檔中的注意事項：
- 注1：HexColor（十六進(jìn)制顏色值）吝镣，如"#ff00ff"
- 注2：關(guān)于navigationStyle
- 客戶端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效昆庇。
- 客戶端 6.7.2 版本開始末贾，navigationStyle: custom 對 <web-view> 組件無效
- 開啟 custom 后，低版本客戶端需要做好兼容整吆。開發(fā)者工具基礎(chǔ)庫版本切到 1.7.0（不代表最低版本拱撵，只供調(diào)試用）可方便切到舊視覺
