详细介绍uniapp小程序自定义底部tabbar样式的方法

在uniapp中，可以通过自定义组件的方式来创建一个自定义的底部TabBar。以下是创建自定义底部TabBar的步骤和示例代码：

1. 创建自定义组件custom-tabbar.vue：

<template>
  <view class="custom-tabbar">
    <view v-for="(item, index) in tabbarList" :key="index" class="tabbar-item" @click="switchTab(index)">
      <view class="icon" :class="{active: index === currentIndex}">
        <image :src="item.icon" class="icon-img"></image>
      </view>
      <text :class="{active: index === currentIndex}">{{item.text}}</text>
    </view>
  </view>
</template>
 
<script>
export default {
  props: {
    tabbarList: Array,
    currentIndex: Number
  },
  methods: {
    switchTab(index) {
      this.$emit('switchTab', index);
    }
  }
}
</script>
 
<style scoped>
.custom-tabbar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 其他样式 */
}
.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 其他样式 */
}
.icon {
  /* 图标容器样式 */
}
.icon-img {
  width: 50rpx;
  height: 50rpx;
}
.active {
  /* 激活状态下的样式 */
}
/* 其他样式 */
</style>

2. 在页面中使用自定义组件：

<template>
  <view>
    <!-- 其他内容 -->
    <custom-tabbar :tabbarList="tabbarList" :currentIndex="currentIndex" @switchTab="switchTab"></custom-tabbar>
  </view>
</template>
 
<script>
import CustomTabbar from '@/components/custom-tabbar.vue';
 
export default {
  components: {
    CustomTabbar
  },
  data() {
    return {
      tabbarList: [
        { icon: '/static/home.png', text: '首页' },
        { icon: '/static/category.png', text: '分类' },
        { icon: '/static/cart.png', text: '购物车' },
        { icon: '/static/my.png', text: '我的' }
      ],
      currentIndex: 0
    };
  },
  methods: {
    switchTab(index) {
      this.currentIndex = index;
      // 根据index进行页面跳转或其他逻辑处理
    }
  }
}
</script>

在这个例子中，custom-tabbar.vue是自定义组件，它接受tabbarList和currentIndex作为props，tabbarList用于定义底部TabBar的列表，currentIndex用于指示当前激活的tab。switchTab方法用于处理tab的切换，并且可以通过$emit向父组件传递索引。在父组件中，你可以根据currentIndex来控制底部TabBar的样式和行为。