CustomNavbar.vue

<template>
  <view class="custom-navbar" :style="navbarStyle">
    <uv-navbar
      :title="title"
      :fixed="fixed"
      :autoBack="false"
      :bgColor="bgColor"
      :titleStyle="titleStyle"
    >
      <template v-slot:left>
        <view class="left-container">
          <view v-if="isTab"></view>
          <uv-icon v-else name="arrow-left" :color="leftIconColor" size="40rpx" @tap="handleBack" />
          <!-- #ifdef MP-WEIXIN -->
          <slot name="right"></slot>
          <!-- #endif -->
        </view>
      </template>
      <template v-slot:right>
        <!-- #ifndef MP-WEIXIN -->
        <slot name="right"></slot>
        <!-- #endif -->
      </template>
    </uv-navbar>
  </view>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 是否固定
  fixed: {
    type: Boolean,
    default: true
  },
  // 是否为tab页面
  isTab: {
    type: Boolean,
    default: false
  },
  // 背景颜色
  bgColor: {
    type: String,
    default: '#3277fb'
  },
  // 标题样式
  titleStyle: {
    type: String,
    default: 'color: #FFFFFF;'
  },
  // 左侧图标颜色
  leftIconColor: {
    type: String,
    default: '#FFFFFF'
  },
  // 自定义样式
  customStyle: {
    type: Object,
    default: () => ({})
  }
});

const navbarStyle = computed(() => {
  const style = { ...props.customStyle };
  return Object.keys(style).map(key => `${key}: ${style[key]}`).join(';');
});

const emit = defineEmits(['back']);

// 返回按钮处理
const handleBack = () => {
  emit('back');
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.custom-navbar {
  width: 100%;
}

.left-container {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

/* 适配iOS和Android的差异 */
/* #ifdef APP-PLUS */
.custom-navbar {
  /* App平台通用样式 */
}
/* #endif */

/* #ifdef APP-PLUS-IOS */
.custom-navbar {
  /* iOS特定样式 */
}
/* #endif */

/* #ifdef APP-PLUS-ANDROID */
.custom-navbar {
  /* Android特定样式 */
}
/* #endif */
</style>