微信小程序解决swiper组件高度问题（可实现不同tab栏，swiper组件不同高度）

<!--index.wxml-->
<view class="container">
    <view class="tab-body" hover-class="none" hover-stop-propagation="false">
    <view class="tab"> 
          <text class=" {{currentTab==0 ? 'select' : ''}}" data-current="0" bindtap="swichNav">Tab1</text>
          <text class=" {{currentTab==1 ? 'select' : ''}}" data-current="1" bindtap="swichNav">Tab2 </text>
          <text class=" {{currentTab==2 ? 'select' : ''}}" data-current="2" bindtap="swichNav">Tab3 </text>
    </view>
    </view>
  <swiper current="{{currentTab}}"  bindchange="bindChange"  class='swp'  style="height:{{swiperViewHeight}}px">
  <swiper-item>
        <view class="v1">
        <view class="box"></view>
        <view class="box2"></view>
        </view>
      </swiper-item>
  <swiper-item>
        <view class="v2">
        <view class="box"></view>
        <view class="box1"></view>
        <view class="box2"></view>
        </view>
    </swiper-item>
  <swiper-item>
        <view class="v3">
        <view class="box"></view>
        <view class="box2"></view>
        <view class="box1"></view>
        <view class="box2"></view>
        <view class="box"></view>
        <view class="box1"></view>
        </view>
    </swiper-item>
   </swiper>
</view>

.swp{
  width: 100%;
  height: 100%;
  padding-top: 80rpx;
}
page{
  height: 100%;
  background:#f4f4f4;
}
.select{
  color: blue;
}
.tab-body{
  position: fixed;
  top:0;
  width: 100%;
  z-index: 100;
  background: #dddddd;
}
.tab{
  display:flex;
  justify-content:space-around;
}
.box{
  width:50%;
  height: 500rpx;
  margin:0 auto;
  background:green;
}
.box1{
  width:50%;
  height: 500rpx;
  margin:0 auto;
  background:red;
}
.box2{
  width:50%;
  height: 500rpx;
  margin:0 auto;
  background:orange;
}

Page({
  data:{
    currentTab: 0,
    swiperViewHeight: '',
    arr:['.v1','.v2','.v3']
  },
  // 滑动切换
  bindChange: function (e) {
      var that = this;
      that.setData({
        currentTab: e.detail.current
      });
      this.setSwiperHeight(this.data.arr[e.detail.current])
    },
  //点击tab切换
    swichNav: function (e) {
      var that = this;
      if (this.data.currentTab === e.target.dataset.current) {
        return false;
      } else {
        that.setData({
          currentTab: e.target.dataset.current
        })
      }
    },
  // 赋值高度
  setSwiperHeight: function (v) {
  let query = wx.createSelectorQuery().in(this);
  query.select(v).boundingClientRect();
  query.exec((res) => {
    let headerHeight = res[0].height;
    this.setData({
      swiperViewHeight: headerHeight
    });
  });
},
  // swiper 自适应高度
  onLoad: function (options) {
      this.setSwiperHeight(this.data.arr[0])
    },
})