uni-app app顶部导航添加支持图片或者svg图标

在uni-app中，你可以通过自定义组件和样式来实现顶部导航栏，并在其中添加支持图片或SVG图标的功能。以下是一个简单的示例，展示了如何在uni-app的顶部导航栏中添加图片或SVG图标。

首先，确保你的项目中已经安装了uni-app相关的依赖，并创建了一个新的uni-app项目。

1. 创建自定义导航栏组件

在components目录下创建一个名为CustomNavBar.vue的组件。

<template>
  <view class="nav-bar">
    <view class="nav-left">
      <image v-if="leftIcon" :src="leftIcon" class="nav-icon" @click="handleLeftClick"></image>
      <slot name="left"></slot>
    </view>
    <view class="nav-title">
      <slot>默认标题</slot>
    </view>
    <view class="nav-right">
      <image v-if="rightIcon" :src="rightIcon" class="nav-icon" @click="handleRightClick"></image>
      <slot name="right"></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    leftIcon: {
      type: String,
      default: ''
    },
    rightIcon: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleLeftClick() {
      this.$emit('left-click');
    },
    handleRightClick() {
      this.$emit('right-click');
    }
  }
}
</script>

<style scoped>
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #fff;
}
.nav-icon {
  width: 24px;
  height: 24px;
}
.nav-title {
  flex: 1;
  text-align: center;
}
</style>

2. 使用自定义导航栏组件

在你的页面组件中（例如pages/index/index.vue），使用CustomNavBar组件，并传入图片或SVG图标的路径。

<template>
  <view>
    <CustomNavBar :leftIcon="leftIcon" @left-click="handleLeftClick">
      <template v-slot:title>
        <text>我的页面</text>
      </template>
      <template v-slot:right>
        <image :src="rightIcon" class="nav-icon" @click="handleRightClick"></image>
      </template>
    </CustomNavBar>
    <!-- 页面内容 -->
  </view>
</template>

<script>
import CustomNavBar from '@/components/CustomNavBar.vue';

export default {
  components: {
    CustomNavBar
  },
  data() {
    return {
      leftIcon: '/static/left-arrow.png', // 图片或SVG图标路径
      rightIcon: '/static/settings.png'  // 图片或SVG图标路径
    };
  },
  methods: {
    handleLeftClick() {
      console.log('Left icon clicked');
    },
    handleRightClick() {
      console.log('Right icon clicked');
    }
  }
}
</script>

这样，你就可以在uni-app的顶部导航栏中添加支持图片或SVG图标的功能了。通过自定义组件和样式，你可以轻松实现各种导航栏样式和功能。