RentWeAppFront/components/navbar/customNavbar.vue

<template>
  <view
    class="custom-navbar"
    :style="{ paddingTop: statusBarHeight + 'px', height: navHeight + 'px' }"
  >
    <view class="nav-content">
      <!-- 左侧返回 -->
      <view class="nav-left">
        <u-icon name="arrow-left" size="44" color="#333" @click="onBack"></u-icon>
        <u-icon name="home" size="44" color="#333" @click="goHome"></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: 'customNavbar',
  props: {
    title: {
      type: String,
      default: '',
    },
    rightButtons: {
      type: Array,
      default: () => [],
    },
    back: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      statusBarHeight: 0,
      navHeight: 0,
      menuRightGap: 0, // 胶囊按钮与右侧边距
    };
  },
  mounted() {
    const systemInfo = uni.getSystemInfoSync();
    const menuButton = wx.getMenuButtonBoundingClientRect
      ? wx.getMenuButtonBoundingClientRect()
      : null;

    if (menuButton) {
      this.statusBarHeight = systemInfo.statusBarHeight;
      this.navHeight =
        menuButton.bottom + menuButton.top - systemInfo.statusBarHeight;
      this.menuRightGap =
        systemInfo.screenWidth - menuButton.right + 8; // 适度留一点间隙
    } else {
      // 其他端
      this.statusBarHeight = systemInfo.statusBarHeight;
      this.navHeight = 90;
      this.menuRightGap = 16;
    }
  },
  methods: {
    onBack() {
      if (this.back) {
        this.back();
      } else {
        uni.navigateBack();
      }
    },
    goHome(){
       	uni.reLaunch({
					url:'../index/index'
				})
    }
  },
};
</script>

<style lang="scss" scoped>
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
  z-index: 999;

  .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>