RentWeAppFront/components/navbar/indexNavbar.vue

<template>
  <view
    class="index-navbar"
    :style="{ height: navHeight + 'px' }"
  >
    <view class="nav-content" :style="{ paddingTop: statusBarHeight + 'px' }">
      <!-- 左侧返回 -->
      <view class="nav-left">
        <u-icon name="arrow-left" size="44" color="#333" @click="onBack" v-if="showBack"></u-icon>
        <u-icon name="home" size="44" color="#333" @click="goHome" v-if="showHome"></u-icon>
      </view>

      <!-- 中间标题 -->
      <view class="nav-title">{{ title }}</view>

      <!-- 右侧按钮（位于胶囊左侧） -->
      <view
        class="nav-right"
        :style="{ marginRight: menuRightGap + 'px' }"
      >
        <view
          v-for="(btn, index) in rightButtons"
          :key="index"
          class="nav-btn"
          @click="btn.onClick && btn.onClick()"
        >
          <u-icon
            :name="btn.icon"
            :color="btn.color || '#333'"
            :size="btn.size || 40"
          ></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'indexNavbar',
  props: {
    title: {
      type: String,
      default: '',
    },
    rightButtons: {
      type: Array,
      default: () => [],
    },
    back: {
      type: Function,
      default: null,
    },
	 showBack: {
	      type: Boolean,
	      default: false // 左侧返回按钮默认显示
	    },
	    showHome: {
	      type: Boolean,
	      default: false // 回首页按钮默认显示
	    }
  },
  data() {
    return {
      statusBarHeight: 0,
      navHeight: 0,
      menuRightGap: 0, // 胶囊按钮与右侧边距
	  navContentHeight:0
    };
  },
  mounted() {
  const systemInfo = uni.getSystemInfoSync();
  const menuButton = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null;

  if (menuButton) {
    this.statusBarHeight = systemInfo.statusBarHeight; 
    this.navContentHeight = menuButton.height; // 只算胶囊按钮区域高度
    this.navHeight = this.statusBarHeight + this.navContentHeight; // 总高度
    this.menuRightGap = systemInfo.screenWidth - menuButton.right + 8;
  } else {
    this.statusBarHeight = systemInfo.statusBarHeight;
    this.navContentHeight = 44; // 默认内容高度
    this.navHeight = this.statusBarHeight + this.navContentHeight;
    this.menuRightGap = 16;
  }

  },
  methods: {
    onBack() {
     const pages = getCurrentPages();
     if (pages > 1) {
       uni.navigateBack();
     } else {
       uni.switchTab({
       		url:'/pages/index/index'
       	})
     }
    },
    goHome(){
       	uni.reLaunch({
					url:'../index/index'
				})
    }
  },
};
</script>

<style lang="scss" scoped>
.index-navbar {
  background-color: none;

  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 24rpx;
  }

  .nav-left {
    width: 50rpx;
    display: flex;
    align-items: center;
  }

  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .nav-right {
    display: flex;
    align-items: center;
    .nav-btn {
      margin-left: 20rpx;
    }
  }
}
</style>