小程序tab切换

  wxml部分

<view class="swiper-tab">

    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">tab1</view>

    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">tab2</view>

    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">tab3</view>

  </view>

 

  <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px"

    bindchange="bindChange">

 <swiper-item>

      <view class="item1"></view>

 </swiper-item>

 <swiper-item>

      <view class="item2"></view>

 </swiper-item>

 <swiper-item>

      <view class="item3"></view>

 </swiper-item>

 </swiper>

//滚动条设置

<scroll-view scroll-y="true" style="height: {{height}}rpx;width: 100%" bindscrolltoupper="upper"

  bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">

 

css部分

.swiper-tab{

  width: 100%;

height: 100rpx;

  text-align: center;

  line-height: 90rpx;

  background-color: #fff;

  padding: 0 52rpx;

  box-sizing: border-box;

}

.swiper-tab-list{  font-size: 30rpx;

    display: inline-block;

  width: 33%;

  color: #AAAAAA;

}

.on{ color: rgba(67, 130, 255, 1);

  border-bottom: 5rpx solid rgba(67, 130, 255, 1);}

 

.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }

.swiper-box view{

  text-align: center;

}

.item1{

  width: 100%;

  /* height:1200rpx; */

  background-color: rgb(250, 250, 250);

  padding: 20rpx 0;

  box-sizing: border-box;

}

 

js部分

// tab切换

    currentTab: 0,

 /**

     * 滑动切换tab

     */

    bindChange: function( e ) {

      var that = this;

      that.setData( { currentTab: e.detail.current });

    },

    /**

     * 点击tab切换

     */

    swichNav: function( e ) {

   

      var that = this;

   

      if( this.data.currentTab === e.target.dataset.current ) {

        return false;

      } else {

        that.setData( {

          currentTab: e.target.dataset.current

        })

      }

    }