uniapp写一个tabs切换的代码

好的，下面是一个简单的示例代码，用于实现基本的tabs切换：

<template>
  <view class="container">
    <view class="tabs">
      <view class="tab" :class="{ active: activeTab === 'tab1' }" @tap="switchTab('tab1')">Tab 1</view>
      <view class="tab" :class="{ active: activeTab === 'tab2' }" @tap="switchTab('tab2')">Tab 2</view>
      <view class="tab" :class="{ active: activeTab === 'tab3' }" @tap="switchTab('tab3')">Tab 3</view>
    </view>
    <view class="content">
      <view v-if="activeTab === 'tab1'">Tab 1 Content</view>
      <view v-if="activeTab === 'tab2'">Tab 2 Content</view>
      <view v-if="activeTab === 'tab3'">Tab 3 Content</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1'
    }
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  background-color: #eee;
}

.tab {
  margin-right: 10px;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

.tab.active {
  color: #fff;
  background-color: #333;
}

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

这段代码定义了三个tab，分别为Tab 1、Tab 2和Tab 3。当用户点击某个tab时，通过`switchTab`方法来切换当前激活的tab，从而显示相应的内容。在代码中，使用了Vue的条件渲染技术，通过`v-if`指令来根据当前激活的tab来决定哪个tab内容需要被显示。最后，使用CSS来美化页面，使其更加美观。