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

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

 wxml:

  <view class='tabbar_view'>
    <view bindtap='navbarchange_func' data-current="0" class="nav {{current==0 ? 'active' : ''}}">
      <text class="navtext {{current==0 ? 'active' : ''}}">个人信息</text>
    </view>
    <view bindtap='navbarchange_func' data-current="1" class="nav {{current==1 ? 'active' : ''}}">
      <text class="navtext {{current==1 ? 'active' : ''}}">竞猜历史</text>
    </view>
    <view bindtap='navbarchange_func' data-current="2" class="nav {{current==2 ? 'active' : ''}}">
      <text class="navtext {{current==2 ? 'active' : ''}}">竞猜结果</text>
    </view>
  </view>

<swiper class='swiper' indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" current="{{current}}" autoplay="{{autoplay}}" duration="{{duration}}" indicator-active-color="#fff" indicator-color="#aaa" bindchange="swiperitemchange_func">
    <!-- 个人信息 -->
    <swiper-item>
        <scroll-view scroll-y="true">
              <view class='list_item'>
              <view class='list_item_name_box'>
                <text>姓名：</text>
                <text>xp</text>
              </view>
              <view class='list_item_name_box'>
                <text class='list_item_name'>职位：</text>
                <text>前端</text>
              </view>
            </view>
        </scroll-view>
    </swiper-item>
    <!-- 竞猜历史 -->
    <swiper-item>
        <scroll-view scroll-y="true">
             <view>第一期的结果------不知道</view>
             <view>第二期的结果------不知道</view>
        </scroll-view>
    </swiper-item>
    <!-- 竞猜结果 -->
    <swiper-item>
        <scroll-view scroll-y="true">
             <view>
                <text>第一名：</text>
                <text>aaa</text>
             </view>
            <view>
                <text>第二名：</text>
                <text>bbb</text>
             </view>
            <view>
                <text>第三名：</text>
                <text>bbb</text>
             </view>
         </scroll-view>
       </swiper-item>
  </swiper>

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