在uniapp中实现上部tab点击切换效果

在uniapp中实现上部tab点击切换效果，可以在页面上定义一个tab组件，然后在tab组件中设置点击事件，切换不同的内容页面。

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

<template>
  <view>
    <view class="tab">
      <view class="tab-item" :class="{active: currentTab === 0}" @click="switchTab(0)">Tab1</view>
      <view class="tab-item" :class="{active: currentTab === 1}" @click="switchTab(1)">Tab2</view>
      <view class="tab-item" :class="{active: currentTab === 2}" @click="switchTab(2)">Tab3</view>
    </view>
    <view class="content">
      <view v-show="currentTab === 0">Content1</view>
      <view v-show="currentTab === 1">Content2</view>
      <view v-show="currentTab === 2">Content3</view>
    </view>
  </view>
</template>

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

<style>
.tab {
  display: flex;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 10rpx;
}
.tab-item.active {
  background-color: #f5f5f5;
}
.content {
  padding: 10rpx;
}
</style>

在上面的代码中，我们定义了一个tab组件，包括三个tab项和对应的内容页面。在tab-item上设置点击事件，切换currentTab的值，从而改变内容页面的显示。同时，我们使用了v-show指令来控制内容页面的显示和隐藏。在样式中，我们使用了flex布局和class绑定来实现选中状态的切换效果。

希望这个示例能够帮助你实现上部tab点击切换效果。