微信小程序 swiper选项卡切换 flex弹性布局+scroll-view撑开高度

写swiper的时候高度无法撑开，也不想用js动态设置高度，就可以利用flex弹性布局来撑开高度，效果如下。

wxml部分

<view class='ranking fz32'>
  <view class='ranking-date bgFFF'>
    <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
      <view class="ranking-picker">
        <text class='picker-text fz26 fw400'>{{date}}</text>
        <image class="picker-image" src="/images/icon/arrow_d.png"></image>
      </view>
    </picker>
  </view>
  <view class='ranking-swiper'>
    <view class='swiper-tab bgFFF'>
      <view class="swiper-tab-item {{currentTab==index?'tabActive':''}}" wx:for="{{rankTitle}}" wx:key="index" data-current='{{index}}' bindtap="clickTab">
        <text>{{item.title}}</text>
      </view>
    </view>
    <swiper class='swiper-box bgFFF' duration="300" bindchange="swiperTab" current="{{currentTab}}">
      <swiper-item  wx:for="{{rankList}}" wx:key="index" duration="300">
        <view class='swiper-box-title'>
          <view>排名</view>
          <text>姓名</text>
          <view>核销券数</view>
        </view>
        <scroll-view scroll-y>
          <view class='swiper-box-list'>
            <view class='swiper-box-item' wx:for="{{item.subList}}" wx:for-item="newItem" wx:key="index">
              <view>{{newItem.rank}}</view>
              <image src='{{newItem.image}}'></image> 
              <text>{{newItem.name}}</text> 
              <view>{{newItem.score}}</view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</view>

js部分

const app = getApp().globalData;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    date: '2016-09-01',
    currentTab: 0,
    rankTitle: [{
        title: '销量榜',
      },
      {
        title: '销售额榜',
      },
      {
        title: '签约榜',
      }
    ],
    rankList: [{
      subList: [{
          rank: 1,
          image: '',
          name: 'EOS主网启动直播',
          score: '12131',
        },
        {
          rank: 1,
          image: '',
          name: 'EOS主网启动直播',
          score: '12131',
        },
        {
          rank: 1,
          image: '',
          name: 'EOS主网启动直播',
          score: '12131',
        },
        {
          rank: 1,
          image: '',
          name: 'EOS主网启动直播',
          score: '12131',
        },
        {
          rank: 1,
          image: '',
          name: 'EOS主网启动直播',
          score: '12131',
        },
        {
          rank: 1,
          image: '',
          name: 'EOS主网启动直播',
          score: '12131',
        },
        {
          rank: 1,
          image: '',
          name: 'EOS主网启动直播',
          score: '12131',
        },
        {
          rank: 1,
          image: '',
          name: 'EOS主网启动直播',
          score: '12131',
        },
        {
          rank: 1,
          image: '',
          name: 'EOS主网启动直播',
          score: '12131',
        },
        {
          rank: 1,
          image: '',
          name: 'EOS主网启动直播',
          score: '12131',
        },
        {
          rank: 1,
          image: '',
          name: 'EOS主网启动直播',
          score: '12131',
        },
        {
          rank: 1,
          image: '',
          name: 'EOS主网启动直播',
          score: '12131',
        },
        {
          rank: 1,
          image: '',
          name: 'EOS主网启动直播',
          score: '12131',
        },
        {
          rank: 1,
          image: '',
          name: 'EOS主网启动直播',
          score: '12131',
        },
        {
          rank: 1,
          image: '',
          name: 'EOS主网启动直播',
          score: '12131',
        },
        {
          rank: 1,
          image: '',
          name: 'EOS主网启动直播',
          score: '12131',
        },
      ],
    }, {
      subList: [{
          rank: 1,
          image: '',
          name: '罗威',
          score: '12131',
        },
        {
          rank: 1,
          image: '',
          name: '罗威',
          score: '12131',
        },
      ],
    }, {
      subList: [{
          rank: 1,
          image: '',
          name: '杨峰',
          score: '12131',
        },
        {
          rank: 1,
          image: '',
          name: '杨峰',
          score: '12131',
        },
      ],
    }]
  },


  //日期选择
  bindDateChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
  //滑动切换
  swiperTab: function(e) {
    var that = this;
    that.setData({
      currentTab: e.detail.current
    });
  },
  //点击切换模式
  clickTab: function(e) {
    var that = this;
    if (that.data.currentTab == e.currentTarget.dataset.current){
      return false;
    }else{
      that.setData({
        currentTab: e.currentTarget.dataset.current
      })
    }
  }   

})

最后附上wxss

page {
  height: 100%;
  background-color: #F1F1F1;
  color: #191919;  
} 

.bgFFF{
  background: #fff
}

.ranking {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ranking-date {
  border-top: 2rpx solid #e0e0e0;
  border-bottom: 2rpx solid #e0e0e0;
}

.ranking-picker {
  padding: 37rpx 30px;
}

.ranking-picker .picker-image {
  width: 20rpx;
  height: 20rpx;
  margin-left: 15rpx;
}

.ranking .ranking-swiper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/*榜单选项卡*/

.swiper-tab {
  display: flex;
}

.swiper-tab-item {
  flex: 1;
  text-align: center;
  color: #969696;
  font-size: 24rpx;
  padding: 35rpx 0;
}

.swiper-tab-item.tabActive >text {
  padding: 35rpx 15rpx;
  color: #11be84;
  border-bottom: 1px solid #11be84;
}
 

.swiper-box {
  margin-top: 30rpx;
  flex: 1;
}

.swiper-box scroll-view {
  height: 100%; 
  padding-top:60rpx;
  box-sizing: border-box;
} 
.swiper-box-title {
  display: flex;
  height: 60rpx;
  line-height: 60rpx;
  border-bottom: 1rpx solid #f1f1f1;
  font-size: 24rpx;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

.swiper-box-title >view:first-child {
  text-align: center;
  width: 120rpx;
}

.swiper-box-title >text {
  flex: 1;
  margin: 0 40rpx;
}

.swiper-box-title >view:last-child {
  text-align: center;
  width: 180rpx;
}

.swiper-box-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
}

.swiper-box-item:nth-child(2n) {
  background: #f6f6f6;
}

.swiper-box-item >view:first-child {
  text-align: center;
  width: 120rpx;
}

.swiper-box-item >image {
  width: 68rpx;
  height: 68rpx;
  background: #11be84;
  border-radius: 100%;
}

.swiper-box-item >text {
  flex: 1;
  margin-left: 12rpx;
  line-height: 68rpx;
}

.swiper-box-item >view:last-child {
  text-align: center;
  width: 180rpx;
}


/*隐藏滚动条*/
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}