微信小程序选项卡swiper默认高度150px（让高度实现自适应）怎么解决?

首先：个人感觉这是小程序的一个bug（相信以后会修复的），默认高度是150px,而且不能通过css控制让高度自适应(就是给高一个auto,在这里不起作用！！！)，百度了好多方法，觉得有用的是给swiper加个固定高100vh（数据有限可以用一下）,但这治标不治本啊，如果有好多数据（不如百十条）那么超过100vh高度之后的就不显示了，

正题 ：首先讲一下，我的逻辑思路

在swiper标签下有一个标签，我们需要获取到子标签的高度（也就是view标签的高度），然后把这个高度*（乘以）循环数组的个数，把这个高度赋值给swiper,这样不管循环多少个数据，都能展示出来，我就是通过这种方法来实现swiper自适应效果的。

下面给一个效果图和代码片段

我没这样做之前两个数据都不能显示全(也就是下面这张图第二组李四循环都不能展示全)

加了之后18条都可以显示全（证明还是有用的！！！）

test.js
js中实现的关键函数：onLoad swiperTab

var app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    height: 0,
    widHeight:0,
    currentTab: 0,
    zhangsan: [{
        touxiang: "../../images/timg.jpg",
        zhangsan: "张三",
        time: "注册时间：2018-12-04 12:00",
        ren: "推荐人：我想静静",
        zhitui: "../../images/zhitui.png",
      },
    ],
    lisi: [{
      touxiang: "../../images/timg.jpg",
      zhangsan: "李四",
      time: "注册时间：2018-12-04 12:00",
      ren: "推荐人：我想静静",
      zhitui: "../../images/zhitui.png",
    },
    ]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var query = wx.createSelectorQuery();
    var that = this;
    /**
     * 获取系统信息
     */
    var zhang = this.data.zhangsan.length;
    query.select('.main').boundingClientRect(function (rect) {
      
      that.setData({
        // 获取要循环标签的高度
        height: rect.height ,
        widHeight: rect.height * zhang + "px"
      })
    }).exec();
  },
  //滑动切换
  swiperTab: function(e) {
    var that = this;
    // 获取单个轮播循环的高度
    var heights=this.data.height;
    // 获取一级成员的数组个数
    var zhang = this.data.zhangsan.length
    // 获取二级成员的数组个数
    var lisi = this.data.lisi.length
    console.log(heights)
    that.setData({
      currentTab: e.detail.current
    });
    if (this.data.currentTab==0){
      that.setData({
        widHeight: heights * zhang+"px"
      });
     // console.log(2222)
     // console.log(this.data.zhangsan.length)
    }else{
      that.setData({
        widHeight: heights * lisi + "px"
      });
      //console.log(2222)
    //  console.log(this.data.lisi.length)
    }
    // console.log(e.detail.current);
  },
  //点击切换
  clickTab: function(e) {

    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },

test.wxml
wxml中关键代码把计算的高给swiper （style='height:{{widHeight}}）

<!-- 选项卡开始 -->
<view class="swiper-tab">
  <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">一级成员</view>
  <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">二级成员</view>
</view>
<swiper class='swi'  current="{{currentTab}}" style='height:{{widHeight}}' duration="300" bindchange="swiperTab">
  <swiper-item>
    <view class='main' wx:for="{{zhangsan}}">
        <view class='main-top'>
          <image src='{{item.touxiang}}'></image>
        </view>
        <view class='main-middle'> 
          <view class='middle-top'>
          {{item.zhangsan}}
          </view>
          <view class='middle-zhong'>
          {{item.time}}
          </view>
          <view class='middle-bottom'>
            {{item.ren}}
          </view>
        </view>
        <view class='main-right'>
          <image src='{{item.zhitui}}'></image>
        </view>
    </view>
  </swiper-item>
  <swiper-item>
    <view class='main' wx:for="{{lisi}}">
        <view class='main-top'>
          <image src='{{item.touxiang}}'></image>
        </view>
        <view class='main-middle'> 
          <view class='middle-top'>
          {{item.zhangsan}}
          </view>
          <view class='middle-zhong'>
          {{item.time}}
          </view>
          <view class='middle-bottom'>
            {{item.ren}}
          </view>
        </view>
        <view class='main-right'>
          <image src='{{item.zhitui}}'></image>
        </view>
    </view>
  </swiper-item>
</swiper>
<!-- 选项卡结束 -->

test.wxss

/* 选项卡 */

.swiper-tab {
  width: 100%;
  /* border-bottom: 2rpx solid #ccc; */
  text-align: center;
  height: 130rpx;
  line-height: 88rpx;
  font-weight: bold;
}

.swiper-tab-item {
  display: inline-block;
  width: 160rpx;
  height: 60rpx;
  border-radius: 10rpx;
  background: #ccc;
  margin: 35rpx 10rpx;
  line-height: 60rpx;
}

.active {
  color: white;
  width: 160rpx;
  height: 70rpx;
  background: white;
  border-radius: 10rpx;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAiBAMAAAA61UNUAAAAJFBMVEUAAABYm/9Ym/9Ym/9Ym/9Ym/9Ym/9Ym/9Ym/9Ym/9Ym/9Ym/9m89iCAAAAC3RSTlMA5oBKSRfTv6mPB8U+K6cAAABESURBVDjLY3DcTRQQYZAmTuFGht1EglGFowpHFY5khUQXKYbEKRRmwATau3dvC2AgAjDt3l3KQBTQ3rGAOIVME7AIAgCbgW/AGyyKMgAAAABJRU5ErkJggg==);
  background-size: 100% 100%;
}

/* 成员 */

.swi {
  width: 100%;
  /* height: 100vh !important; */

}

.main {
  height: 180rpx;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #ccc;
  margin: 0 25rpx;
}

.main-top {
  height: 100rpx;
  width: 100rpx;
  padding: 0 50rpx 0 10rpx;
}

.main-top image {
  height: 100rpx;
  width: 100rpx;
}

.main-right {
  width: 70rpx;
  height: 30rpx;
}

.main-right image {
  width: 70rpx;
  height: 30rpx;
}

.main-middle {
  width: 470rpx;
}

.middle-top {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 25rpx;
}

.middle-zhong {
  font-size: 25rpx;
  color: #b0b0b0;
  margin-bottom: 10rpx;
}

.middle-bottom {
  font-size: 25rpx;
  color: #b0b0b0;
}

.main-right {
  margin-bottom: 105rpx;
}