uniapp横向选项卡

以下是uniapp实现横向选项卡的代码示例：

<template>
  <view class="tab-control">
    <view class="tab-control-top">
      <view
        class="tab-control-item"
        :class="{ 'active': currentIndex === index }"
        v-for="(item, index) in titles"
        :key="index"
        @click="handleItemClick(index)"
      >
        {{ item }}
      </view>
    </view>
    <view class="tab-control-content">
      <swiper :current="currentIndex" @change="handleSwiperChange">
        <swiper-item v-for="(item, index) in titles" :key="index">
          <view class="tab-control-panel">{{ item }} 内容区域</view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      titles: ['选项卡1', '选项卡2', '选项卡3']
    };
  },
  methods: {
    handleItemClick(index) {
      this.currentIndex = index;
    },
    handleSwiperChange(event) {
      this.currentIndex = event.detail.current;
    }
  }
};
</script>

<style>
.tab-control {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tab-control-top {
  display: flex;
  height: 80rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
}

.tab-control-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  color: #666;
}

.tab-control-item.active {
  color: #f00;
}

.tab-control-content {
  flex: 1;
}

.tab-control-panel {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  color: #666;
}
</style>

以上代码实现了一个简单的横向选项卡，包括选项卡标题和内容区域。选项卡标题使用flex布局实现，点击标题可以切换内容区域。内容区域使用swiper组件实现，可以左右滑动切换选项卡。