"window": {
? ? "backgroundTextStyle": "light",
? ? "navigationBarBackgroundColor": "#fff",
? ? "navigationBarTitleText": "WeChat",
? ? "navigationBarTextStyle": "black",
? ? "navigationStyle": "custom"
? },

{
? "navigationBarTitleText": "我的",
? "navigationBarTextStyle": "white",
? "navigationStyle": "custom",
? "usingComponents": {}
}

// app.js
App({
? onLaunch() {
? ? //自定義導(dǎo)航欄 獲取設(shè)備頂部窗口的高度（不同設(shè)備窗口高度不一樣，根據(jù)這個(gè)來設(shè)置自定義導(dǎo)航欄的高度）
? ? wx.getSystemInfo({
? ? ? success: (res) => {
? ? ? ? let custom = wx.getMenuButtonBoundingClientRect()
? ? ? ? this.globalData.statusBarHeight = res.statusBarHeight
? ? ? ? this.globalData.navBarHeight = custom.height + (custom.top - res.statusBarHeight) * 2
? ? ? }
? ? })
? },
? globalData: {
? ? statusBarHeight: 0,
? ? navBarHeight: 0,
? }
})

const app = getApp()
Component({
? // multipleSlots 為組件開啟多插槽模式
? options: {
? ? multipleSlots: true,
? },
? // externalClasses 為組件指定多個(gè)外部樣式類
? externalClasses: ['nav-bgc-class', 'nav-title-class', 'ex-back-pre'],
? // properties 組件用來儲(chǔ)存外部數(shù)據(jù)
? properties: {
? ? navbarData: { //navbarData ? 由父頁面?zhèn)鬟f的數(shù)據(jù)，變量名字自命名
? ? ? type: Object,
? ? ? value: {},
? ? ? observer: function (newVal, oldVal) { }
? ? },
? },
? // 組件用來儲(chǔ)存內(nèi)部私有數(shù)據(jù)
? data: {
? ? // 自定義導(dǎo)航欄的高度
? ? statusBarHeight: app.globalData.statusBarHeight,
? ? navBarHeight: app.globalData.navBarHeight,
? },
? // attached函數(shù) 當(dāng)組件進(jìn)入頁面節(jié)點(diǎn)樹時(shí)觸發(fā)，可以使用setData，絕大多數(shù)初始化工作在這個(gè)時(shí)機(jī)進(jìn)行
? attached: function () { },
? // methods對(duì)象 定義組件內(nèi)的各種方法
? methods: {
? ? // 返回鍵，觸發(fā)自定義事件，將返回的事件交給父級(jí)頁面來分情況定義
? ? _navback() {
? ? ? // this.triggerEvent('goBack')
? ? ? wx.navigateBack()
? ? }
? }
})

{
? "usingComponents": {},
? "component": true
}

<!-- 默認(rèn)為黑色的返回鍵-->
<view class="nav-wrap nav-bgc-class" style='height: {{statusBarHeight + navBarHeight}}px;'>
? <!-- ?左上角的返回按鈕 其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按鈕的顯示隱藏，1為顯示，0為隱藏 -->
? <view class='nav-capsule' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;' wx:if='{{navbarData.showCapsule}}' bindtap='_navback'>
? ? <image class='back-pre ex-back-pre' src='back.png' mode='aspectFill'></image>
? </view>
? ? <!-- ?中間的標(biāo)題 -->
? <view class='nav-title nav-title-class' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;line-height: {{navBarHeight}}px;'>{{navbarData.title}}</view>
</view>

/* 頂部固定定位 ? 標(biāo)題要居中 ? 自定義按鈕和標(biāo)題要和右邊微信原生的膠囊上下對(duì)齊 */
.nav-wrap {
? position: fixed;
? width: 750rpx;
? top: 0;
? left: 0;
? right: 0;
? background: #fff;
? z-index: 9999999;
? transform: translate3d(0, 0, 0);
}
/* 返回鍵 */
.nav-capsule {
? width: 140rpx;
? /* background-color: skyblue; */
? /* 讓里面的圖片元素垂直居中 */
? display: flex;
? align-items: center;
? margin-left: 30rpx;
}

.back-pre {
? width: 32rpx;
? height: 36rpx;
}

/* 標(biāo)題 */
.nav-title {
? position: absolute;
? left: 0;
? right: 0;
? bottom: 0;
? width: 300rpx;
? margin: auto;
? /* 水平垂直居中 */
? /* display: flex; */
? align-items: center;
? justify-content: space-around;
? /* 超出部分省略號(hào)顯示 */
? overflow: hidden;
? text-overflow: ellipsis;
? white-space: nowrap;
? /* 字體設(shè)置 */
? font-family: PingFangSC-Medium;
? font-size: 32rpx;
? color: #000000;
? letter-spacing: 0;
? text-align: center;
}

const app = getApp()
Page({
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? nvabarData: {
? ? ? showCapsule: 0, //是否顯示左上角圖標(biāo) ? 1表示顯示 ? ?0表示不顯示
? ? ? title: '我的', //導(dǎo)航欄 中間的標(biāo)題
? ? },
? ? height: app.globalData.statusBarHeight + app.globalData.navBarHeight,
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function (options) {
? ??
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function () {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow: function () {
? ? var userInfo = wx.getStorageSync('userInfo')
? ? if (userInfo) {
? ? ? this.setData({
? ? ? ? userInfo: userInfo,
? ? ? ? hasUserInfo: true
? ? ? })
? ? }
? ? var phoneNumber = wx.getStorageSync('phoneNumber')
? ? if (phoneNumber) {
? ? ? this.setData({
? ? ? ? phoneNumber: phoneNumber,
? ? ? })
? ? }
? ? var loginInfo = wx.getStorageSync('loginInfo')
? ? if (loginInfo) {
? ? ? this.setData({
? ? ? ? loginInfo: loginInfo
? ? ? })
? ? }
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ?*/
? onHide: function () {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?*/
? onUnload: function () {

? },

? /**
? ?* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
? ?*/
? onPullDownRefresh: function () {

? },

? /**
? ?* 頁面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {

? },

? /**
? ?* 用戶點(diǎn)擊右上角分享
? ?*/
? onShareAppMessage: function () {

? }
})

{
? "navigationStyle": "custom",
? "usingComponents": {
? ?? ?"nav-bar": "/components/navbar/navbar",
? }
}

<!-- navbar頭部 -->
<nav-bar navbar-data='{{nvabarData}}'></nav-bar>
<view style='margin-top: {{height}}px;'>
? 內(nèi)容
</view>