uniapp 滑动选项卡切换

在uniapp中，实现滑动选项卡切换可以通过多种方式，其中一种常见的方法是使用`<swiper>`组件和`<scroll-view>`组件结合来实现。以下是一个简单的示例：

1. **创建基本的页面结构**：
- 使用`<swiper>`组件来包裹整个选项卡区域。
- 使用`<scroll-view>`组件来包裹每个选项卡的内容。

2. **绑定事件**：
- 监听`<swiper>`的`change`事件，获取当前切换的选项卡索引。
- 根据索引来更新显示的内容。

<template>
  <view class="container">
    <swiper :current="currentTab" @change="handleTabChange" :style="{ height: tabHeight + 'px' }">
      <swiper-item v-for="(tab, index) in tabs" :key="index">
        <scroll-view :scroll-y="true" :style="{ height: tabHeight + 'px' }">
          <view>{{ tab.content }}</view>
        </scroll-view>
      </swiper-item>
    </swiper>

    <view class="tab-bar">
      <view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === index }" @click="handleTabClick(index)">
        {{ tab.name }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tabHeight: 500,
      tabs: [
        { name: '选项卡1', content: '这是选项卡1的内容' },
        { name: '选项卡2', content: '这是选项卡2的内容' },
        { name: '选项卡3', content: '这是选项卡3的内容' }
      ]
    }
  },
  methods: {
    handleTabChange(e) {
      this.currentTab = e.detail.current
    },
    handleTabClick(index) {
      this.currentTab = index
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tab-bar {
  display: flex;
  justify-content: space-around;
  background-color: #f8f8f8;
}
.tab-item {
  padding: 10px;
  cursor: pointer;
}
.tab-item.active {
  color: #007aff;
  border-bottom: 2px solid #007aff;
}
</style>

在这个示例中，我们使用`<swiper>`组件来管理选项卡的切换，使用`<scroll-view>`组件来展示每个选项卡的内容。通过监听`<swiper>`的`change`事件和点击事件来实现选项卡的切换。