uniapp选项卡制作

在uni-app中制作选项卡可以使用tabbar组件和tabbar的子组件tabbar-item来实现。

以下是一个简单的示例代码：

<template>
  <view>
    <tabbar>
      <tabbar-item icon="home" text="首页" @click="switchTab(0)" :selected="currentTab === 0"></tabbar-item>
      <tabbar-item icon="list" text="列表" @click="switchTab(1)" :selected="currentTab === 1"></tabbar-item>
      <tabbar-item icon="user" text="个人中心" @click="switchTab(2)" :selected="currentTab === 2"></tabbar-item>
    </tabbar>
    
    <!-- 根据当前选中的选项卡显示对应的内容 -->
    <view v-if="currentTab === 0">
      <!-- 首页内容 -->
    </view>
    <view v-if="currentTab === 1">
      <!-- 列表内容 -->
    </view>
    <view v-if="currentTab === 2">
      <!-- 个人中心内容 -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0, // 当前选中的选项卡索引
    };
  },
  methods: {
    switchTab(index) {
      this.currentTab = index; // 切换选项卡
    },
  },
};
</script>

在上面的示例中，我们使用了tabbar组件和三个tabbar-item子组件来创建一个简单的选项卡。通过给每个tabbar-item设置不同的icon和text属性，可以自定义选项卡的图标和文字。

通过@click事件监听选项卡的点击事件，然后在switchTab方法中切换当前选中的选项卡索引currentTab。根据currentTab的值，用v-if指令来决定显示哪个选项卡对应的内容。

你可以根据自己的需求，修改选项卡的样式、图标和文字，并在对应的view标签中添加相关内容。