image.png
要用自定義的導(dǎo)航欄只需要在app.json中配置
image.png
目前微信小程序不支持單個(gè)頁(yè)面設(shè)置(現(xiàn)在支持了增淹，本文章僅供參考)粗合，一旦在要決定使用自定義導(dǎo)航欄毅糟，那么每個(gè)頁(yè)面都需要設(shè)置，為了方便我就將其寫(xiě)成了一個(gè)組件：
image.png
index.wxml文件：
<view class='nav-wrap' style='height: {{height*2 + 20}}px;'>
// 導(dǎo)航欄 中間的標(biāo)題
<view class='nav-title' style='line-height: {{height*2 + 44}}px;'>{{navbarData.title}}</view>
<view style='display: flex; justify-content: space-around;flex-direction: column'>
// 導(dǎo)航欄 左上角的返回按鈕 和home按鈕
// 其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按鈕的顯示隱藏岭接，首頁(yè)不顯示
<view class='nav-capsule' style='height: {{height*2 + 44}}px;' wx:if='{{navbarData.showCapsule}}'>
//左上角的返回按鈕，wx:if='{{!share}}'空制返回按鈕顯示
//從分享進(jìn)入小程序時(shí) 返回上一級(jí)按鈕不應(yīng)該存在
<view bindtap='_navback' wx:if='{{!share}}'>
<image src='/imgs/back-pre.png' mode='aspectFill' class='back-pre'></image>
</view>
<view class='navbar-v-line' wx:if='{{!share}}'></view>
<view bindtap='_backhome'>
<image src='/imgs/back-home.png' mode='aspectFill' class='back-home'></image>
</view>
</view>
</view>
</view>
index.wxss文件：
/* 頂部要固定定位 標(biāo)題要居中 自定義按鈕和標(biāo)題要和右邊微信原生的膠囊上下對(duì)齊 */
.nav-wrap {
position: fixed;
width: 100%;
top: 0;
background: #fff;
color: #000;
z-index: 9999999;
}
/* 標(biāo)題要居中 */
.nav-title {
position: absolute;
text-align: center;
max-width: 400rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
font-size: 36rpx;
color: #2c2b2b;
font-weight: 600;
}
.nav-capsule {
display: flex;
align-items: center;
margin-left: 30rpx;
width: 140rpx;
justify-content: space-between;
height: 100%;
}
.navbar-v-line {
width: 1px;
height: 32rpx;
background-color: #e5e5e5;
}
.back-pre, .back-home {
width: 32rpx;
height: 36rpx;
margin-top: 4rpx;
padding: 10rpx;
}
.nav-capsule .back-home {
width: 36rpx;
height: 40rpx;
margin-top: 3rpx;
}
index.json文件（自定義組件必須）：
{
"component": true
}
index.js文件：
const app = getApp()
Component({
properties: {
navbarData: { //navbarData 由父頁(yè)面?zhèn)鬟f的數(shù)據(jù)臼予，變量名字自命名
type: Object,
value: {},
observer: function (newVal, oldVal) {}
}
},
data: {
height: '',
//默認(rèn)值 默認(rèn)顯示左上角
navbarData: {
showCapsule: 1
}
},
attached: function () {
// 獲取是否是通過(guò)分享進(jìn)入的小程序
this.setData({
share: app.globalData.share
})
// 定義導(dǎo)航欄的高度 方便對(duì)齊
this.setData({
height: app.globalData.height
})
},
methods: {
// 返回上一頁(yè)面
_navback() {
wx.navigateBack()
},
//返回到首頁(yè)
_backhome() {
wx.switchTab({
url: '/pages/index/index',
})
}
}
})
app.js 文件：
//app.js
App({
onLaunch: function (options) {
// 判斷是否由分享進(jìn)入小程序
if (options.scene == 1007 || options.scene == 1008) {
this.globalData.share = true
} else {
this.globalData.share = false
};
//獲取設(shè)備頂部窗口的高度（不同設(shè)備窗口高度不一樣鸣戴，根據(jù)這個(gè)來(lái)設(shè)置自定義導(dǎo)航欄的高度）
//這個(gè)最初我是在組件中獲取，但是出現(xiàn)了一個(gè)問(wèn)題粘拾，當(dāng)?shù)谝淮芜M(jìn)入小程序時(shí)導(dǎo)航欄會(huì)把
//頁(yè)面內(nèi)容蓋住一部分,當(dāng)打開(kāi)調(diào)試重新進(jìn)入時(shí)就沒(méi)有問(wèn)題窄锅，這個(gè)問(wèn)題弄得我是莫名其妙
//雖然最后解決了，但是花費(fèi)了不少時(shí)間
wx.getSystemInfo({
success: (res) => {
this.globalData.height = res.statusBarHeight
}
})
},
globalData: {
share: false, // 分享默認(rèn)為false
height: 0,
}
})
app.wxss文件:
/**app.wxss**/
pages {
position: relative;
z-index: 9999998;
background: #fff;
}
如何使用自定義導(dǎo)航欄：
文件目錄圖
image.png
在微信小程序頁(yè)面中：
pages文件夾index.wxml文件：
// 引入自定義組價(jià)缰雇。'navbar-data'中navbar是自定義名字入偷，決定了組件中'navbarData'的名字
<nav-bar navbar-data='{{nvabarData}}'></nav-bar>
<view class='home-page' style='margin-top: {{height}}px'>
home page
</view>
pages文件夾index.json文件中(聲明使用的組件，和組件的地址)：
{
"usingComponents": {
"nav-bar": "/commpents/navbar/index"
}
}
pages文件夾index.js文件：
//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
data: {
// 組件所需的參數(shù)
nvabarData: {
showCapsule: 1, //是否顯示左上角圖標(biāo) 1表示顯示 0表示不顯示
title: '我的主頁(yè)', //導(dǎo)航欄 中間的標(biāo)題
},
// 此頁(yè)面 頁(yè)面內(nèi)容距最頂部的距離
height: app.globalData.height * 2 + 20 ,
},
onLoad() {
console.log(this.data.height)
}
})
pages文件夾index.wxss文件：
/**index.wxss**/
.home-page {
height: 160rpx;
width: 100%;
border: 1rpx solid red;
font-size: 60rpx;
}
由自定義組件引發(fā)的一些問(wèn)題械哟，1.下拉刷新：當(dāng)頁(yè)面內(nèi)容高度不夠屏幕高度時(shí)疏之，ios的下拉刷新將會(huì)出現(xiàn)----拉下來(lái)，上不去了暇咆，也是偶爾出現(xiàn)锋爪。解決方法就是頁(yè)面設(shè)置個(gè)最小高度，精準(zhǔn)一點(diǎn)就是頁(yè)面的高度 + 下拉刷新時(shí)頂部?jī)?nèi)容距離頂部的高度爸业。
轉(zhuǎn)自：http://www.reibang.com/p/7393c800ba09
