uniapp中swiper+view，实现左右tab切换，高度自适应

在uniapp中，可以通过使用swiper和view组件来实现左右tab切换，并且让内容高度自适应。以下是一个示例代码：

<template>
  <view class="container">
    <swiper
      autoplay="false"
      current="{{ current }}"
      class="swiper"
      duration="300"
      skip-hidden-item-layout="true"
      @change="swiperChange"
    >
      <swiper-item>
        <view class="tab-item" :class="{active: currentTab === 0}" @tap="changeTab(0)">Tab 1</view>
      </swiper-item>
      <swiper-item>
        <view class="tab-item" :class="{active: currentTab === 1}" @tap="changeTab(1)">Tab 2</view>
      </swiper-item>
      <swiper-item>
        <view class="tab-item" :class="{active: currentTab === 2}" @tap="changeTab(2)">Tab 3</view>
      </swiper-item>
    </swiper>
    <view class="content">
      <view class="tab-content" :class="{active: currentTab === 0}" style="height: {{tabHeight[0]}}px">
        Content 1
      </view>
      <view class="tab-content" :class="{active: currentTab === 1}" style="height: {{tabHeight[1]}}px">
        Content 2
      </view>
      <view class="tab-content" :class="{active: currentTab === 2}" style="height: {{tabHeight[2]}}px">
        Content 3
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      currentTab: 0,
      tabHeight: [0, 0, 0]
    };
  },
  methods: {
    swiperChange(e) {
      this.currentTab = e.detail.current;
    },
    changeTab(index) {
      this.currentTab = index;
      this.current = index;
    }
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query.selectAll(".tab-content").boundingClientRect(rects => {
      this.tabHeight = rects.map(rect => rect.height);
    }).exec();
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.swiper {
  height: 80rpx;
  margin-top: 20rpx;
}
.tab-item {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}
.tab-item.active {
  color: #007aff;
  border-bottom: 3rpx solid #007aff;
}
.content {
  flex: 1;
  overflow: hidden;
}
.tab-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  transition: height 0.3s;
}
.tab-content.active {
  height: auto;
}
</style>

在这个示例中，我们使用swiper和swiper-item组件来实现左右tab切换，使用view组件来展示每个tab对应的内容。我们监听swiper的change事件，根据current属性来更新当前选中的tab，同时也更新currentTab属性。在每个tab-content的样式中，我们设置了height为auto，这样可以让内容自适应高度。在mounted生命周期中，我们使用uni.createSelectorQuery()获取每个tab-content的高度，保存在tabHeight数组中，然后在模板中使用style绑定动态高度，实现高度自适应。