微信小程序封装自定义导航栏

1. 在 app.json 文件中设置导航栏的样式：

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

2. 在app.js中获取设备顶部窗口的高度

App({

  onLaunch: function (options) {

    var _this = this;
    //自定义导航栏 获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度）
    wx.getSystemInfo({
      success: (res) => {
        // 基础库 2.1.0 开始支持wx.getMenuButtonBoundingClientRect()，低版本需要适配
        let custom = wx.getMenuButtonBoundingClientRect()

        _this.globalData.statusBarHeight = res.statusBarHeight
        _this.globalData.navBarHeight = custom.height + (custom.top - res.statusBarHeight) * 2
      }
    })

  },


  globalData: { // 全局数据
    statusBarHeight: 0,
    navBarHeight: 0
  },
})

3. 创建navbar组件

• wxml文件中

<view class='nav-wrap nav-bgc-class' style='height: {{statusBarHeight + navBarHeight}}px;'>
  
  <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='{{navbarData.backSrc || "/assets/arrow.png"}}' mode='aspectFill'>image>
    
  view>
    
  <view class='nav-title nav-title-class' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;' wx:if='{{navbarData.title&&!navbarData.titleHide}}'>{{navbarData.title}}view>
  <view class='nav-title nav-title-class' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;' wx:if="{{!navbarData.titleHide&&!navbarData.title}}"><image src="/assets/logo.png" alt="" class="nav-logo"/>view>
view>

• js文件中

const app = getApp()
Component({
    // multipleSlots 为组件开启多插槽模式
    options: {
        multipleSlots: true,
    },
    // properties 组件用来储存外部数据
    properties: {
        navbarData: { //navbarData   由父页面传递的数据，变量名字自命名
            type: Object,
            value: {},
            observer: function (newVal, oldVal) {}
        },
    },
    // 组件用来储存内部私有数据
    data: {
        // 自定义导航栏的高度
        statusBarHeight: app.globalData.statusBarHeight,
        navBarHeight: app.globalData.navBarHeight
    },
    // attached函数 当组件进入页面节点树时触发，可以使用setData，绝大多数初始化工作在这个时机进行
    attached: function () {},
    methods: {
        // 返回键，触发自定义事件，将返回的事件交给父级页面来分情况定义
        _navback() {
            this.triggerEvent('goBack')
        }
    }
})

• json文件

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

• wxss文件

/* 顶部固定定位   标题要居中   自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
.nav-wrap {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    background: #F0F0F0;
    z-index: 9999;
    transform: translate3d(0, 0, 0);
}

/* 返回键 */
.nav-capsule {
    width: 140rpx;
    display: flex;
    align-items: center;
    position: absolute;
    left: 20rpx;
    top: 0;
    bottom: 0;
    margin: auto;
}

.back-pre {
    width: 40rpx;
    height: 40rpx;
}


/* 标题 */
.nav-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 360rpx;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #45494D;
    font-size: 24rpx;
    font-weight: 600;
}
.nav-title .nav-logo {
  width: 99rpx;
  height: 41rpx;
}

4. 页面引用

• wxml文件

• js文件

import {
  request
} from '../../utils/request'
const app = getApp()
let pageIndex = 1
Page({

  /**
   * 页面的初始数据
   */
  data: {
    nvabarData: {
      showCapsule: 1,//是否显示左上角图标   1表示显示    0表示不显示
      title: '首页',
      backSrc:'' //如果传入左上角使用传入的图片否则使用返回图标
    },
    

  },

  _goBack() {

    let pages = getCurrentPages(); //获取当前页面pages里的所有信息。
    console.log(pages, "pages")
    let prevPage = pages[pages.length - 2]; //prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面，-3是上上个页面以此类推。
    prevPage.setData({ // 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。
      chooseValue: this.data.chooseValue
    })
    //上一个页面内执行setData操作，将我们想要的信息保存住。当我们返回去的时候，页面已经处理完毕。

    //最后就是返回上一个页面。
    wx.navigateBack({
      delta: 1 // 返回上一级页面。
    })
  }

}