自定义导航

nav.wxml

<view class='nav-wrap' style='height: {{height*2 + 20}}px;'>
    <!-- // 导航栏 中间的标题 -->
  <view class='nav-title' style='line-height: {{height*2 + 44}}px;'><image src='/images/logo.png'></image></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='/images/back.png' mode='aspectFill' class='back-pre'></image>
      </view>
      <view class='navbar-v-line' wx:if='{{!share}}'></view>
      <view bindtap='_backhome'>
        <image src='/images/home.png' mode='aspectFill' class='back-home'></image>
      </view>

     
    </view>
  </view>
</view>

nav.json

{
  "component": true
}

nav.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() {
          console.log("basckhome");
          wx.switchTab({
            url: '/pages/index/index',
          })
          // wx.navigateBack({
          //   delta: 5
          // })
        }
      }

    })

details.wxml

<nav-bar class='hotel-details-nac-bar' navbar-data='{{nvabarData}}'></nav-bar>

details.json

{
 "usingComponents": {
   "nav-bar": "/commpents/nav/nav"
 }
}