uniapp 写一个tab切换

好的，以下是一个简单的uniapp tab切换示例：

1. 创建三个页面，分别为 A 页面、B 页面、C 页面。

2. 在 App.vue 中创建一个 tab 组件：

<template>
  <view class="container">
    <tab-bar :active.sync="activeIndex" :list="tabList"></tab-bar>
    <router-view></router-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: 0,
        tabList: [
          {
            text: 'A',
            icon: 'home-o'
          },
          {
            text: 'B',
            icon: 'search'
          },
          {
            text: 'C',
            icon: 'setting-o'
          }
        ]
      }
    }
  }
</script>

3. 在 tab 组件中引入自定义组件 TabBar.vue：

<template>
  <view class="tab-bar">
    <view v-for="(item, index) in list" :key="index" class="tab-item" @click="handleClick(index)">
      <icon :type="item.icon" :size="24" :color="active === index ? '#007aff' : '#ccc'"></icon>
      <text :style="{ color: active === index ? '#007aff' : '#ccc' }">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      active: {
        type: Number,
        default: 0
      },
      list: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      handleClick(index) {
        this.$emit('update:active', index)
      }
    }
  }
</script>

<style>
  .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 -1px 5px rgba(0,0,0,0.2);
  }

  .tab-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
  }
</style>

4. 在路由配置文件中设置三个路由：

export default [
  {
    path: '/',
    redirect: '/a'
  },
  {
    path: '/a',
    name: 'A',
    component: () => import('@/pages/A.vue')
  },
  {
    path: '/b',
    name: 'B',
    component: () => import('@/pages/B.vue')
  },
  {
    path: '/c',
    name: 'C',
    component: () => import('@/pages/C.vue')
  }
]

5. 在 A.vue、B.vue、C.vue 中分别添加页面内容。

6. 完成以上步骤，现在可以在 App.vue 中通过修改 activeIndex 来实现页面的切换了。