uniapp自定义底部导航栏

在UniApp中，你可以使用自定义组件来实现底部导航栏。下面是一个简单的示例：

1. 创建一个自定义底部导航栏的组件，例如 "CustomTabBar.vue"。

<template>
  <div class="custom-tab-bar">
    <div
      v-for="(item, index) in tabList"
      :key="index"
      class="tab-item"
      :class="{ active: activeIndex === index }"
      @click="handleTabClick(index)"
    >
      <img :src="item.icon" class="tab-icon" />
      <span class="tab-title">{{ item.title }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabList: {
      type: Array,
      required: true,
    },
    activeIndex: {
      type: Number,
      required: true,
    },
  },
  methods: {
    handleTabClick(index) {
      // 触发底部导航栏切换事件，你可以在这里进行路由跳转或其他操作
      this.$emit('tabChange', index);
    },
  },
};
</script>

<style scoped>
.custom-tab-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f5f5f5;
}

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

.tab-icon {
  width: 24px;
  height: 24px;
}

.tab-title {
  margin-top: 5px;
}
</style>

2. 在需要使用底部导航栏的页面中引入自定义组件，并传入相应的参数。

<template>
  <div>
    <!-- 页面内容 -->
    <!-- ... -->

    <!-- 底部导航栏 -->
    <custom-tab-bar :tabList="tabList" :activeIndex="activeIndex" @tabChange="handleTabChange" />
  </div>
</template>

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

export default {
  components: {
    CustomTabBar,
  },
  data() {
    return {
      tabList: [
        { title: '首页', icon: 'path/to/home.png' },
        { title: '分类', icon: 'path/to/category.png' },
        { title: '我的', icon: 'path/to/my.png' },
      ],
      activeIndex: 0,
    };
  },
  methods: {
    handleTabChange(index) {
      // 处理底部导航栏切换事件
      this.activeIndex = index;
    },
  },
};
</script>

在上面的示例中，你可以根据自己的需求修改底部导航栏的样式和功能。注意，这里的路由跳转需要你根据自己的项目配置进行处理。

希望对你有所帮助！如果还有其他问题，请随时提问。