uniapp小程序uView自定义tabbar

在uniapp中自定义tabbar，你可以创建一个自定义组件，然后在App.vue或者特定页面的<template>中引用这个组件。以下是一个简单的自定义tabbar组件的示例：

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

<template>
  <view class="tabbar">
    <view class="tabbar-item" v-for="(item, index) in tabbarList" :key="index" @click="switchTab(index)">
      {{ item.text }}
    </view>
  </view>
</template>
 
<script>
export default {
  props: {
    tabbarList: {
      type: Array,
      default: () => [
        { text: '首页', pagePath: '/pages/home/home' },
        { text: '我的', pagePath: '/pages/mine/mine' }
      ]
    }
  },
  methods: {
    switchTab(index) {
      const pagePath = this.tabbarList[index].pagePath;
      uni.switchTab({
        url: pagePath,
      });
    }
  }
};
</script>
 
<style>
.tabbar {
  display: flex;
  justify-content: space-around;
  /* 其他样式 */
}
.tabbar-item {
  /* 项目样式 */
}
</style>

2. 在App.vue中引用自定义组件：

<template>
  <view>
    <!-- 页面内容 -->
    <custom-tabbar :tabbarList="tabbarList"></custom-tabbar>
  </view>
</template>
 
<script>
import CustomTabbar from './components/custom-tabbar.vue';
 
export default {
  components: {
    CustomTabbar
  },
  data() {
    return {
      tabbarList: [
        { text: '首页', pagePath: '/pages/home/home' },
        { text: '我的', pagePath: '/pages/mine/mine' }
      ]
    };
  }
};
</script>

在这个例子中，custom-tabbar组件接受一个tabbarList属性，你可以根据自己的需求自定义这个列表。点击tab项时，通过switchTab方法切换至对应的页面。这只是一个简单的示例，你可以根据实际需求添加更多的功能，比如图标显示、样式调整等。