封装uniapp 通用的导航栏 小程序和H5页面都可以使用

因为最近在做小程序和h5  并且要求头部导航栏 要展示不一样的返回按钮 所以只能自己封装一个

1.首先要在pages.json 中 在每个路由下面加上   "navigationStyle": "custom"  去掉原生的导航样式

2.封装一个通用的 headerBar.vue 组件

下面内容请收看

<template>
  <view>
    <!-- 自定义导航栏 -->
    <view class="navBarBox">
      <!-- 上方背景色 -->
      <view class="navBarBackground" :style="{ height: statusBarHeight + 'px' }"></view>
      <!-- 状态栏占位 -->
      <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
      <!-- 真正的导航栏内容 -->
      <view class="navBar" :style="{ height: capsuleHeight + 'px' }">
        <image src="../../static/icons/Slice 69@2x.png" mode="" class="left_icon" v-if="platform=='MP-WEIXIN'"
          @click="$emit('back')"></image>
        <image src="../../static/user/Slice 70@2x.png" mode="" class="close" v-if="platform=='H5'"
          @click="$emit('pageBack')"></image>
        <view class="title">{{title}}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      title: {
        type: String
      }
    },
    data() {
      return {
        // 状态栏高度
        statusBarHeight: 0,
        // 胶囊高度
        capsuleHeight: 0,
      };
    },

    created() {
      // #ifdef H5
      this.H5()
      // #endif

      //#ifdef MP-WEIXIN
      this.unaipp()
      // #endif
    },
    methods: {
      H5() {
        // 获取手机状态栏高度
        this.statusBarHeight = window.screen.availHeight - window.innerHeight;
        // 获取胶囊信息
        const menuButton = document.querySelector('.uni-page-head__right');
        if (menuButton) {
          const rect = menuButton.getBoundingClientRect();
          // 计算胶囊高度
          this.capsuleHeight = rect.height + 2 * (rect.top - this.statusBarHeight);
        } else {
          this.capsuleHeight = 44; // 默认值
        }
      },
      unaipp() {
        // 获取手机状态栏高度
        this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
        console.log(this.statusBarHeight, 'this.statusBarHeight....')
        // 获取胶囊信息
        const res = wx.getMenuButtonBoundingClientRect();
        // 计算胶囊高度
        this.capsuleHeight = res.height + 2 * (res.top - this.statusBarHeight);
        console.log(this.capsuleHeight, 'this.capsuleHeight....')

      },

    }
  };
</script>

<style>
  .navBarBox {
    position: relative;
  }

  .navBarBox .statusBar {}

  .navBarBox .navBar {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #EDEDED;
  }

  .navBarBox .navBarBackground {
    position: absolute;
    width: 100%;
    background-color: #EDEDED;
    top: 0;
  }

  .left_icon {
    width: 30rpx;
    height: 30rpx;
    position: absolute;
    left: 32rpx;
  }

  .close {
    width: 28rpx;
    height: 28rpx;
    position: absolute;
    left: 32rpx;
  }

  .title {
    font-size: 34rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    color: #1D2129;
    font-weight: 700;
  }
</style>

这样一个头部导航就封装好了