mpvue小程序自定义导航栏

mpvue小程序自定义导航栏

1. 在要用自定义导航的页面的json文件中启用navigationStyle：

{
  "usingComponents": {
  },  
  "navigationStyle": "custom"
}

2. 将自定义导航设计为一个组件

navigation-top组件中：

<template>
  <div class="container">
    <!-- 手机状态栏高度 -->
    <div :style="{height:statusBarHeight +'px'}"></div>
    <!-- 导航栏高度 -->
    <div class="navWarp" :style="{height: navBarHeight +'px',lineHeight: navBarHeight +'px'}">
      <img class="kefu" src="../../static/images/other/kefu.png" @click="contact" alt="">
      <p class="title">{{title}}</p> 
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String
  },
  data() {
    return {
      navBarHeight: 0, // 导航栏高度
      statusBarHeight: 0 ,// 手机状态栏高度
    }
  },
  created() {
    let systemInfo = wx.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight
    let rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null; //胶囊按钮位置信息
    wx.getMenuButtonBoundingClientRect();
    this.navBarHeight = ( _ => { //导航栏高度
      let gap = rect.top - this.statusBarHeight; //动态计算每台手机状态栏到胶囊按钮间距
      return 2 * gap + rect.height;
    })();
    console.log(systemInfo,this.navBarHeight)
  },
  methods: {
    contact(){

    },
  },
}
</script>

<style lang="less" scoped>
  .container{
    width: 100%;
    background:#fff;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    .navWarp{
      position: relative;
      .title{
        font-weight: 600;
        font-size: 34rpx;
        text-align: center;
        /* max-width: 400rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; */
      }
      .kefu{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 28rpx;
        width: 52rpx;
        height: 52rpx;
        border: 2rpx #ccc solid;
        border-radius: 50%;
      }
    }
  }
</style>

3. 引入自定义导航组件

<!-- 自定义导航组件 -->
<navigation-top ref="navigation" title="溢涌堂"/>