自定的导航栏

<template>
    <!-- 自定义导航组件
         goBack 返回事件  不传事件则调用默认事件
         goHome 回到首页事件 不传事件则调用默认事件
         navTitle 导航标题  -->
    <div class="custom-nav" :style="{height:navHeight,paddingTop:navPadding}">
      <div class="nav-left" :style="{borderRadius:leftHeight}">
        <div class="check-position " @click="defaultGoPosition">
          <img style="vertical-align: middle;" src="../assets/images/position@2x.png" alt="address" class="nav_back position-img">
          <span class="ellipsis_line"  style="font-size: 15px;display:inline-block;width:46px;vertical-align: middle;">{{positionText}}</span>
          <img style="vertical-align: middle;width:10px;height:6px;margin-left:4px;" src="../assets/images/checked@2x.png" alt="address" class="nav_back position-img">
        </div>
      </div>
      <!-- <div v-if='!showBack' :style="{height:leftHeight,width:leftwidth,borderRadius:leftHeight}"></div> -->
      <div class="nav-center">{{navTitle}}</div>
      <div class="nav-right" :style="{height:leftHeight,width:leftwidth}"></div>
    </div>
</template>

<script>
export default {
  props:{
    showBack:{ //是否显示返回按钮
        type:Boolean,
        default:true
    },
    navTitle:{ //导航标题
        type:String,
        default:''
    },
    positionText:{ //定位地址
        type:String,
        default:''
    },
    goBack:{ //返回事件
        type:Function,
    },
    goHome:{ //返回事件
        type:Function,
    },
    goPosition:{ //返回事件
        type:Function,
    },
  },
  data(){
    return{
      navHeight:'',
      navPadding:'',
      leftHeight:'',
      leftwidth:'',
    }
  },
  mounted(){
    this.getSystemInfo();
    // this.getTitle();
  },
  methods:{
    gotoGame (path) {
      this.reLaunchPageTo(this.router + path)
    },
    //返回按钮默认事件 不传事件则调用默认事件
    defaultGoBack(){
      if(this.goBack){
        this.goBack()
      }else{
        this.$router.back()
      }
    },
    //返回按钮默认事件 不传事件则调用默认事件
    defaultGoPosition(){
      if(this.goPosition){
        this.goPosition()
      }else{
        this.gotoGame('pages/mall/address/position/main')
      }
    },

    //返回首页默认事件 不传事件则调用默认事件
    defaultGoHome(){
      if(this.goHome){
        this.goHome()
      }else{
        this.gotoGame('pages/mall/home/main')
      }
    },

    //获取设备号信息
    getSystemInfo(){
      var menu= wx.getMenuButtonBoundingClientRect()
      this.leftHeight = menu.height+'px'
      this.leftwidth = menu.width+'px'
      wx.getSystemInfo({
        success: (res)=>{
          if(res.system.indexOf('iOS')!= -1){
            var _height = res.statusBarHeight + 44
            var _padding = res.statusBarHeight + 6
            this.navHeight = _height+'px'
            this.navPadding = _padding + 'px'
          }else{
            var _height = res.statusBarHeight + 48
            var _padding = res.statusBarHeight + 8
            this.navHeight = _height+'px'
            this.navPadding = _padding + 'px'
          }
        }
      })
    }
    
  }
}
</script>

<style scoped>
.custom-nav{
  width: 100%;
  height: 64px;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: flex-start;
  padding-left: 16px;
  padding-right: 12px;
  padding-bottom: 14px;
  position: fixed;
  top: 0;
  z-index: 10;
  
}
.nav-left{
  min-width: 70px;
  /* height: 60px; */
  /* box-shadow:0px 2px 2px 0px rgba(240,240,240,0.5); */
  /* border-radius:30px; */
  /* border:1px solid rgb(223, 223, 223); */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background: rgba(255,255,255,0.6); */
}
.nav-left img{
  width: 100%;
  height: 100%;
}
.nav-right{
  width: 158px;
  height: 60px;
}
.nav-center{
  flex: 1;
  line-height: 32px;
  font-size:18px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.go-back{
  width:28px;
  height:28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gray-line{
  width:1px;
  height: 32PX;
  background:#E7E7E7;
}
.go-home{
  width:36px;
  height:36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav_icon{
  width: 24px;
  height: 24px;
}
.position-img{
  margin-right:6px ;
  width: 17px;
  height: 19px;
}
</style>

引用

<!-- 自定义导航 -->
    <customNav :positionText='cityPositionName' navTitle="优选商城" v-if="iswx == 1" ></customNav>

小程序需要设置

config: {
    // "navigationBarTitleText": '优选商城',
    "backgroundTextStyle":"dark" ,
    "enablePullDownRefresh": true,
    "navigationStyle":"custom",//设置自定义导航栏
    
  }