1. 程式人生 > >微信小程式的 swiper tab切換 寬高自適應

微信小程式的 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>縣萍啊</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
      })
    }
  }

如有不足之處,請大家指點