微信小程序的 swiper tab切换 宽高自适应

小程序 swiper标签宽高自适应解决方法，亲测有效，代码如下

 wxml:

  
    
      个人信息
    
    
      竞猜历史
    
    
      竞猜结果
    
  


    
    
        
              
              
                姓名：
                xp
              
              
                职位：
                前端
              
            
        
    
    
    
        
             第一期的结果------不知道
             第二期的结果------不知道
        
    
    
    
        
             
                第一名：
                aaa
             
            
                第二名：
                bbb
             
            
                第三名：
                bbb
             
         
       
  

wxss:  

 
.tabbar_view {
  border-bottom: 2rpx solid #ccc;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 25rpx;
  font-size: 30rpx;
  box-shadow: 0px 0px 4rpx 6rpx #eee;
}
 
.nav {
  color: #444;
  width: 300rpx;
  height: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  letter-spacing: 3rpx;
}
 
.nav.active {
  color: #75dfab;
  border-bottom: 4rpx solid #75dfab;
}
 
.navtext {
  padding: 20rpx 0rpx;
}
 
.navtext.active {
  border-bottom: 5rpx solid #75dfab;
}

.swiper {
  height: 1000rpx;
  display: flex;
  margin-top: 10rpx;
}

swiper-item{
 height: 100%;
 overflow:scroll;
 overflow-x:hidden;
}

scroll-view {
  height: 100%;
}

js:

//滑动切换
  swiperTab: function(e) {
    var that = this;
    that.setData({
      currentTba: 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
      })
    }
  }

如有不足之处，请大家指点

该代码仅供参考，未经允许不得转载，转载请著名出处：https://blog.csdn.net/qq_40701522/article/details/83040343