navigationStyle
要用自定義的導航欄只需要在app.json中配置
app.json
目前微信小程序不支持單個頁面設置(現在支持了，本文章僅供參考)，一旦在要決定使用自定義導航欄，那么每個頁面都需要設置，為了方便我就將其寫成了一個組件：
組件目錄：
組件目錄
index.wxml文件：
<view class='nav-wrap' style='height: {{height*2 + 20}}px;'>
// 導航欄 中間的標題
<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'>
// 導航欄 左上角的返回按鈕 和home按鈕
// 其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按鈕的顯示隱藏，首頁不顯示
<view class='nav-capsule' style='height: {{height*2 + 44}}px;' wx:if='{{navbarData.showCapsule}}'>
//左上角的返回按鈕，wx:if='{{!share}}'空制返回按鈕顯示
//從分享進入小程序時 返回上一級按鈕不應該存在
<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文件：
/* 頂部要固定定位 標題要居中 自定義按鈕和標題要和右邊微信原生的膠囊上下對齊 */
.nav-wrap {
position: fixed;
width: 100%;
top: 0;
background: #fff;
color: #000;
z-index: 9999999;
}
/* 標題要居中 */
.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 由父頁面傳遞的數據，變量名字自命名
type: Object,
value: {},
observer: function (newVal, oldVal) {}
}
},
data: {
height: '',
//默認值 默認顯示左上角
navbarData: {
showCapsule: 1
}
},
attached: function () {
// 獲取是否是通過分享進入的小程序
this.setData({
share: app.globalData.share
})
// 定義導航欄的高度 方便對齊
this.setData({
height: app.globalData.height
})
},
methods: {
// 返回上一頁面
_navback() {
wx.navigateBack()
},
//返回到首頁
_backhome() {
wx.switchTab({
url: '/pages/index/index',
})
}
}
})
app.js 文件：
//app.js
App({
onLaunch: function (options) {
// 判斷是否由分享進入小程序
if (options.scene == 1007 || options.scene == 1008) {
this.globalData.share = true
} else {
this.globalData.share = false
};
//獲取設備頂部窗口的高度（不同設備窗口高度不一樣，根據這個來設置自定義導航欄的高度）
//這個最初我是在組件中獲取，但是出現了一個問題，當第一次進入小程序時導航欄會把
//頁面內容蓋住一部分,當打開調試重新進入時就沒有問題，這個問題弄得我是莫名其妙
//雖然最后解決了，但是花費了不少時間
wx.getSystemInfo({
success: (res) => {
this.globalData.height = res.statusBarHeight
}
})
},
globalData: {
share: false, // 分享默認為false
height: 0,
}
})
app.wxss文件:
/**app.wxss**/
pages {
position: relative;
z-index: 9999998;
background: #fff;
}
如何使用自定義導航欄：
文件目錄圖
文件目錄圖
在微信小程序頁面中：
pages文件夾index.wxml文件：
// 引入自定義組價。'navbar-data'中navbar是自定義名字，決定了組件中'navbarData'的名字
<nav-bar navbar-data='{{navbarData}}'></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
//獲取應用實例
const app = getApp()
Page({
data: {
// 組件所需的參數
navbarData: {
showCapsule: 1, //是否顯示左上角圖標 1表示顯示 0表示不顯示
title: '我的主頁', //導航欄 中間的標題
},
// 此頁面 頁面內容距最頂部的距離
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;
}
由自定義組件引發的一些問題，1.下拉刷新：當頁面內容高度不夠屏幕高度時，ios的下拉刷新將會出現----拉下來，上不去了，也是偶爾出現。解決方法就是頁面設置個最小高度，精準一點就是頁面的高度 + 下拉刷新時頂部內容距離頂部的高度。
- 我忘了。。。。
各位如果有更好的，請告訴我
