今天來說一下小程序的自定義導(dǎo)航欄。
1、設(shè)置導(dǎo)航欄style為custom：
custom
2、這是刷新頁面，頁面的內(nèi)容就跑到了頁面的頂端，不留絲毫間隙：
內(nèi)容飛了
3、然后定義一個(gè)components，就是我們自定義的導(dǎo)航欄組件：
（1）先在項(xiàng)目根目錄創(chuàng)建一個(gè)components文件夾，這個(gè)文件夾的名稱是固定的，就是components：
components
（2）文件夾內(nèi)創(chuàng)建一個(gè)導(dǎo)航欄組件的文件夾：
nav
（3）右擊創(chuàng)建的“nav”文件夾，點(diǎn)擊“新建Component”，會(huì)自動(dòng)在該文件夾下生成四個(gè)我們常用的文件：
點(diǎn)這個(gè)
生成了文件
（4）下面是代碼時(shí)間（后端開發(fā)寫的前端代碼，將就看吧）：
nav.js：
# data中增加barHeight參數(shù)
data: {
barHeight: wx.getSystemInfoSync().statusBarHeight
},
nav.wxml：
<view style="padding-top:{{barHeight + 40}}rpx; padding-bottom: 50rpx;">
<view class="topView" bindtap="jumpToAbout">
<image class="topImage" src="/images/logo.png" mode="aspectFill"></image>
<text class="topText">自定義導(dǎo)航欄</text>
<image class="topIcon" src="/images/right.png"></image>
</view>
<text class="topSubText">副標(biāo)題可以寫在這里</text>
</view>
nav.wxss：
.topView {
display: flex;
}
.topImage {
height: 60rpx;
width: 130rpx;
}
.topText {
margin-left: 12rpx;
font-size: larger;
}
.topIcon {
height: 40rpx;
width: 40rpx;
margin-top: 8rpx;
}
.topSubText {
color: #999;
}
4、導(dǎo)航欄組件就定義好了，然后把它引入頁面：
（1）要引入的頁面json配置文件中引用：
{
"usingComponents": {
"nav":"../../components/nav/nav"
}
}
必須用相對路徑。
（2）頁面中引入組件：
<nav></nav>
<text>內(nèi)容</text>
5、最后看效果：
logo隨便截的
這樣就搞定了，希望你們的logo比我的好看。
