微信小程序-----自定义导航栏

点这里看原文链接，有图有讲解

先上效果图：

【1】全局配置app.json 及 app.js增加计算导航栏高度

app.json配置改为自定义导航栏

app.jsz增加计算导航栏高度

// app.js
App({
  globalData: {},
  onLaunch: function () {
    let menuButtonObject = wx.getMenuButtonBoundingClientRect()
    wx.getSystemInfo({
      success: (res) => {
        console.log(res)
        let statusBarHeight = res.statusBarHeight,
          navTop = menuButtonObject.top, //胶囊按钮与顶部的距离
          navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2 //导航高度
        this.globalData.navHeight = navHeight
        this.globalData.navTop = navTop
        this.globalData.windowHeight = res.windowHeight
      },
      fail(err) {
        console.log(err)
      },
    })
  },
})

【2】导航栏组件 （navbar）

navbar.js

// navbar.js
const App = getApp()

Component({
  options: {
    addGlobalClass: true,
  },
  /**
   * 组件的属性列表
   */
  properties: {
    pageName: String,
    showNav: {
      type: Boolean,
      value: true,
    },
    showHome: {
      type: Boolean,
      value: true,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {},
  lifetimes: {
    attached: function () {
      this.setData({
        navHeight: App.globalData.navHeight,
        navTop: App.globalData.navTop,
      })
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //回退
    _navBack: function () {
      console.log('第一个自定义导航')
    },
    //回主页
    _toIndex: function () {
      console.log('第二个自定义导航')
    },
  },
})

navbar.json

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

navbar.wxml

<view class="navbar custom-class" style='height:{{navHeight}}px;background-color:{{bgColor}}'>
  <view wx:if="{{showNav}}" class="navbar-action-wrap navbar-action-group row item-center" style='top:{{navTop}}px;background-color:rgba(255,255,255,.6)'>
    <view name="back" color="{{iconColor}}" size="15px" block="{{true}}" class="navbar-action_item" bindtap="_navBack">大</view>
    <view wx:if="{{showHome}}" name="index" color="{{iconColor}}" size="15px" block="{{true}}" class="navbar-action_item last" bindtap="_toIndex">小</view>
  </view>
  <view class='navbar-title' style='top:{{navTop}}px'>
    {{pageName}}
  </view>
</view>

navbar.wxss

/* components/navbar/index.wxss */

.navbar {
  width: 100%;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
  flex-shrink: 0;
}

.navbar-title {
  width: 100%;
  box-sizing: border-box;
  padding-left: 115px;
  padding-right: 115px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  position: absolute;
  left: 0;
  z-index: 10;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.navbar-action-wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  left: 10px;
  z-index: 11;
  line-height: 1;
  padding-top: 4px;
  padding-bottom: 4px;
}

.navbar-action-group {
  border: 1px solid #f0f0f0;
  border-radius: 20px;
  overflow: hidden;
}

.navbar-action_item {
  padding: 3px 0;
  color: #333;
}

.navbar-action-group .navbar-action_item {
  border-right: 1px solid #f0f0f0;
  padding: 3px 14px;
}

.navbar-action-group .last {
  border-right: none;
}

以上是navbar的组件各文件的配置

在需要显示自定义组织的页面用该组件

页面对应json文件内引用该组件：

{
  "usingComponents": {
    "navbar": "../../components/navbar/navbar"
  }
}

页面调用组件

<!--pages/demo2/demo2.wxml-->
<view class='view-page'>
  <navbar page-name="你当前页面的名字" show-nav="{{true}}" show-home="{{false}}"></navbar>
  <view class='page-content'>
    测试自定义导航的demo
  </view>
</view>

点这里看原文链接，有图有讲解