记录:小程序前端开发之tab选项卡与swiper高度自适应的问题与解决记录

小白前端，记录一下自己平时遇到的问题与解决方案，方便用到的时候查看。

今天，自己弄了一个选项卡，选项卡内容没有问题，可是到了选项卡下面的swiper的时候，就卡住了，我的需求是swiper里面的内容可以根据数据来自适应高度。因为swiper小程序必须要有固定的高度，不然就得用小程序封装的默认高度150rpx,而我里面的内容高度是不固定的，是根据数据来适应高度的，前前后后查了好久，网上的前辈们的博客也看了许多，可是都没有解决这个高度自适应的问题，最后还是问了同为大神的同学，给了scroll-view动态计算的高度，就解决了我好久不能搞定的问题，果然，经验无价啊。

效果图如下：

下面来记录功能代码：

 

wxml部分:

  
    待付款
    待发货
    待收货
    已完成
  

  
    
      
          
            第一页
            第一页
            第一页
            第一页
            第一页
            第一页
            第一页
            第一页
            第一页
            第一页
            第一页
            第一页
            第一页
            显示
          
        
      
    
      
        第二页
        第二页
        第二页
        第二页
        第二页
        第二页
        第二页
        第二页
        第二页
        第二页
        第二页
      
    
    
      
        第三页
        第三页
        第三页
        第三页
        第三页
        第三页
        第三页
        第三页
        第三页
        第三页
        第三页
      
    
    
      
        第四页
        第四页
        第四页
        第四页
        第四页
        第四页
        第四页
        第四页
        第四页
        第四页
        第四页
        第四页
        1第四页
        0
      
    
  

wxss部分:

.swiper-tab{
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
  width: 100%;
  position:fixed;
  top:0;
  z-index: 100;
  background: #fff;
}
.swiper-tab-item{
  flex: 1;
  text-align: center;
  border-bottom: 1rpx solid #eee;
}
.active{
  color: blue;
  position: relative;
}
.swiper-tab-item.active:after{
   content: "";
   display: block;
   height: 6rpx;
   width: 60rpx;
   background: #4675F9;
   position: absolute;
   bottom: 0;
   left: 65rpx;
   border-radius: 16rpx;
   }
.swiper{
  width: 100%;
  height: 100%;
  display: flex;
  position: fixed;
  top:80rpx;
}
scroll-view{
  width: 100%;
  height: 93%;/*动态高度*/
}
.gaodu{
  height: 100rpx;
  background: rgb(196, 248, 255);
  text-align: center;
  line-height: 100rpx;
  border-bottom: 1rpx solid #4675F9;
}

js部分:

Page({
  data: {
    currentTab: 0 //预定的位置
  },
  //点击滑动
  bindchange: function (e) {
    let that = this;
    that.setData({
      currentTab: e.detail.current
    })
  },
  //点击切换，滑块index赋值
  clickTab: function (e) {
    let that = this;
    if (that.data.currentTab === e.currentTarget.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.currentTarget.dataset.current
      })
    }
  }
})