uni-app小程序自定义导航栏组件

使用uni-app开发的小程序自定义导航栏组件，直接复制即可用

新建一个vue文件

<template>
  <view class="top-bar">
    <!--noSpace为false时可以把页面内容顶下来-->
    <view v-if="!noSpace" class="space">
      <view v-if="!noBar" class="status-height"></view>
      <view v-if="!noMenuBtn" :style="{ height: menuButtonTop + 'px' }" class="menu-height"></view>
      <view :style="{ height: height + 'px' }" class="nav-height"></view>
    </view>
    <!--头部-->
    <view class="tb-main">
      <view class="tb-bg" :style="{ opacity, background: noBg ? 'transparent' : background }"></view>
      <!--电量条高度-->
      <view v-if="!noBar" class="status-height"></view>
      <view v-if="!noMenuBtn" :style="{ height: menuButtonTop + 'px' }" class="menu-height"></view>
      <!--end 电量条高度-->
      <view class="top-nav" :style="{ height: height + 'px', color: textColor }">

        <view class="tn-left">
          <text v-if="!noBack" class="iconfont" @click="goBack">&#xe60c;</text>
          <slot name="left"></slot>
        </view>

        <view :class="{ hasCenter: $slots.center }" class="tn-center" :style="{ opacity }">
          <text v-if="title">{{ title }}</text>
          <slot name="center"></slot>
        </view>

        <view class="tn-right">
          <text v-if="right" @click="onRightClick">{{ right }}</text>
          <slot name="right"></slot>
        </view>
      </view>
    </view>
    <!--电量条背景-->
  </view>
</template>

<script>
  export default {
    props: {
      /**
       * 标题
       */
      title: {
        type: String,
        default: ''
      },
      /**
       * 背景颜色
       */
      background: {
        type: String,
        default: 'linear-gradient(to right, #ffffff, #ffffff)'
      },
      /**
       * 右侧文字
       */
      right: {
        type: String,
        default: ''
      },
      /**
       * 是否显示后退按钮
       */
      noBack: {
        type: Boolean,
        default: false
      },
      /**
       * 是否把导航部分的间距顶下来
       */
      noSpace: {
        type: Boolean,
        default: false
      },
      /**
       * 不显示statusBar高度
       */
      noBar: {
        type: Boolean,
        default: false
      },
      /**
       * 不显示小程序胶囊高度
       */
      noMenuBtn: {
        type: Boolean,
        default: false
      },
      /**
       * 标题栏文字颜色
       */
      color: {
        type: String,
        default: '#333333'
      },
      /**
       * 是否只在网页显示
       */
      onlyH5: {
        type: Boolean,
        default: false
      },
      /**
       * 是否透明背景
       */
      transparent: {
        type: Boolean,
        default: false
      },
      /**
       * 标题栏高度，px
       */
      height: {
        type: Number,
        default: 45
      }
    },
    data() {
      return {
        sLoad: false,
        isLogin: false,
        messageNum: 0,
        barTop: 0,
        opacity: 0,
        isScrollTo: false,
        menuButtonTop: 0, // 小程序胶囊按钮高度
      };
    },
    computed: {
      textColor() {
        if (!this.transparent) {
          return this.color
        }
        if (this.opacity >= 0.5) {
          return '#333333'
        }
        return '#ffffff'
      },
      noBg() {
        return this.opacity <= 0
      }
    },
    created() {
      this.barTop = uni.getSystemInfoSync().safeArea.top + 50
      // #ifdef MP-WEIXIN
      const button = uni.getMenuButtonBoundingClientRect()
      this.menuButtonTop = button.top
      // #endif
      this.opacity = this.transparent ? 0 : 1
    },
    methods: {
      goBack() {
        this.$nav.back()
      },
      onRightClick() {
        this.$emit('rightClick')
      },
      setOpacity(scrollTop) {
        const barTop = this.barTop + this.menuButtonTop
        let opacity = Number((1 / barTop) * scrollTop).toFixed(2)

        if (opacity >= 1) {
          this.opacity = 1
          if (!this.isScrollTo) {
            this.$setBarStyle('dark')
            this.isScrollTo = true
            console.log('滑动了')
          }
        } else {
          if (opacity <= 0.5 && this.isScrollTo) {
            this.$setBarStyle('light')
            this.isScrollTo = false
            console.log('到顶部了')
          }
          this.opacity = opacity
        }
      },
    },
  };
</script>

<style scoped lang="scss">
  $barheight: var(--status-bar-height);
  $navheight: 45px;
  $txtcolor: #333333;

  .tb-main {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 99;
    background: none;

    .tb-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .top-nav {
      background: none;
      height: $navheight;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      z-index: 1;

      &.hasOneRight {
        width: 100%;
        justify-content: flex-end;
      }
    }

    .status-height {
      height: $barheight;
      background: none;
      position: relative;
      z-index: 1;
    }

    .tn-left,
    .tn-right {
      position: absolute;
      min-width: 32rpx;
      display: block;
      height: 32px;
      text-align: center;
      line-height: 32px;
      color: inherit;
      font-size: 18px;
      z-index: 2;
    }

    .tn-left {
      left: 15px;
      &:active {
        opacity: 0.8;
      }
    }

    .tn-right {
      right: 15px;
      font-size: 16px;
    }

    .tn-center {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: inherit;
      font-size: 16px;
      text-align: center;
      &.hasCenter {
        flex: none;
        margin: auto;
      }
    }
  }

  .space {
    background: none;

    .status-height {
      height: $barheight;
    }

    .nav-height {
      height: $navheight;
    }
  }
</style>