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

前言

我们经常会使用微信小程序自带的tab组件与swiper组件搭配来实现漂亮的tab切换页面，但是我们不得不承认swiper组件默认高度的确是很让我们头疼。那么下面我们来实现上图中根据不同的tab页面来使swiper页面动态的变换高度。

干货

wxml

<!--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>

更多请见：http://www.mark-to-win.com/tutorial/50990.html