用原生uniapp 写一个tab栏切换数据

好的，以下是一个使用原生 uniapp 写的选项卡切换数据的示例代码：

<template>
  <view>
    <view class="tab-bar">
      <view class="tab-item" :class="{active: currentTab === 0}" @click="handleTabClick(0)">选项卡1</view>
      <view class="tab-item" :class="{active: currentTab === 1}" @click="handleTabClick(1)">选项卡2</view>
      <view class="tab-item" :class="{active: currentTab === 2}" @click="handleTabClick(2)">选项卡3</view>
    </view>
    <view v-show="currentTab === 0">选项卡1的内容</view>
    <view v-show="currentTab === 1">选项卡2的内容</view>
    <view v-show="currentTab === 2">选项卡3的内容</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0
    };
  },
  methods: {
    handleTabClick(index) {
      this.currentTab = index;
    }
  }
};
</script>

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

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-size: 16px;
  color: #666;
}

.tab-item.active {
  color: #f00;
}
</style>

在上面的代码中，我们使用了 `view` 组件和 CSS 来实现了选项卡切换的效果。通过 `v-show` 指令来控制选项卡内容的显示，`currentTab` 变量表示当前选中的选项卡的索引，初始值为 0。在选项卡上绑定 `@click` 事件，通过调用 `handleTabClick` 方法来处理选项卡切换逻辑。在 `handleTabClick` 方法中，将当前选中的选项卡的索引设置为 `currentTab` 变量的值，从而控制对应选项卡内容的显示。同时，我们也使用了 CSS 样式来设置选项卡的样式，包括背景色、文字颜色等。