微信小程序 选项卡切换+swiper自适应高度

如图所示一个，具体步骤如下：

一、wxml部分

  点人
  随机
  抢答



  
    
      
        已出勤学生
      
      
        
          
          {{item.name}}
        
      
    
  
  
    随机点人
  
  
    {{btnRush}}
  

二、js部分

Page({
  data: {
    currentTab: 0,
    students: [{ //假数据  
      url: '1.jpg',
      name: '老王'
    }, {
      url: '1.jpg',
      name: '老王'
    }, {
      url: '1.jpg',
      name: '老王'
    }, {
      url: '1.jpg',
      name: '老王'
    }, {
      url: '1.jpg',
      name: '老王'
    }, {
      url: '1.jpg',
      name: '老王'
    }, {
      url: '1.jpg',
      name: '老王'
    }, {
      url: '1.jpg',
      name: '老王'
    }, {
      url: '1.jpg',
      name: '老王'
    }, {
      url: '1.jpg',
      name: '老王'
    }]
  },

  //滑动切换
  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
      })
    }
  }   
}) 

现在呈现的效果就是如上图所示，但是高度是swiper组件的默认150px，无法撑开高度，这个时候就要去计算高度并赋值给swiper。

三、swiper自适应高度

在js部分添加：

//动态计算高度
  onLoad: function (options) {
    var line = Math.ceil(this.data.students.length / 3.0);
    this.setData({
      aheight: 60 + 160 * line
    });
  }, 

顺便附上wxss样式

.swiper-tab {
  display: flex;
  margin-top: 60rpx;
}

.swiper-tab-item {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border: 1px solid #6c6fc0;
  border-radius: 3px;
  color: #6c6fc0;
  font-size: 32rpx;
  margin: 0 20rpx;
}

.active {
  color: #fff;
  background: #6c6fc0;
}

.swiper-box {
  margin: 30rpx 0;
  box-sizing: border-box;
}

.box1-content{
  overflow: hidden;
}
.box1-title{
  height: 60rpx;
  line-height: 60rpx;
}
.box1-content .box1-list{
  float: left;
  width: 108rpx;
  height: 160rpx;
  margin-right:60px;
}
.box1-content .box1-list image{ 
  width: 68rpx;
  height: 68rpx;
  background: #000;
  border-radius: 100%;
}

这样一个高度自适应的swiper选项卡就做好了。