uniapp小程序tabbar加icon

在 Uniapp 小程序中，可以通过使用自定义导航栏来实现 TabBar 加 Icon 的效果。以下是一个简单的示例：

1. 在 `App.vue` 文件中，添加一个 `tabBar` 字段，用于定义底部 TabBar 的样式和内容：

<template>
  <div>
    <!-- 其他页面内容 -->
    <tab-bar :selected="selected" :list="tabBarList"></tab-bar>
  </div>
</template>

<script>
import tabBar from '@/components/tabBar.vue'

export default {
  components: {
    tabBar
  },
  data() {
    return {
      tabBarList: [
        {
          iconPath: '/static/tabbar/home.png',
          selectedIconPath: '/static/tabbar/home-active.png',
          text: '首页',
          pagePath: '/pages/index/index'
        },
        {
          iconPath: '/static/tabbar/category.png',
          selectedIconPath: '/static/tabbar/category-active.png',
          text: '分类',
          pagePath: '/pages/category/category'
        },
        // 添加更多的 TabBar 项
      ],
      selected: 0 // 初始选中的 TabBar 项索引
    }
  }
}
</script>

2. 创建一个 `tabBar.vue` 组件，用于显示底部 TabBar 的内容：

<template>
  <div class="tab-bar">
    <div v-for="(item, index) in list" :key="index" 
         class="tab-bar-item" @click="changeTab(index)">
      <img :src="selected === index ? item.selectedIconPath : item.iconPath" alt="">
      <p :class="{ 'text-selected': selected === index }">{{ item.text }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    selected: {
      type: Number,
      default: 0
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    changeTab(index) {
      if (index !== this.selected) {
        this.selected = index
        // 切换页面
        uni.switchTab({
          url: this.list[index].pagePath
        })
      }
    }
  }
}
</script>

<style scoped>
.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab-bar-item img {
  width: 24px;
  height: 24px;
}

.text-selected {
  color: #07c160;
}
</style>

3. 在 `static` 目录下创建 `tabbar` 文件夹，并将对应的 TabBar 图标放入其中。

这样，就可以通过切换选项卡来改变页面，并在选中的选项卡上显示对应的图标和文本。你可以根据需要自定义 TabBar 的样式和图标。