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

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

wxml部分

  
    
      
        {
    {date}}
        
      
    
  
  
    
      
        {
    {item.title}}
      
    
    
      
        
          排名
          姓名
          核销券数
        
        
          
            
              {
    {newItem.rank}}
               
              {
    {newItem.name}} 
              {
    {newItem.score}}
            
          
        
      
    
  

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;
}