小程序的tab标签实现效果

swiper制作tab切换

index.html

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<view class="swiper-tab">  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view>  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Seside2</view>  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Seside3</view> </view> <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">  <swiper-item>   <view>Seside1</view>  </swiper-item>  <swiper-item>   <view>Seside2</view>  </swiper-item>  <swiper-item>   <view>Seside3</view>  </swiper-item> </swiper>

index.css

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

.swiper-tab{   width: 100%;   border-bottom: 2rpx solid #777777;   text-align: center;   line-height: 80rpx; } .swiper-tab-list{   font-size: 30rpx;   display: inline-block;   width: 20%;   color: #777777; } .on{   color: #da7c0c;   border-bottom: 5rpx solid #da7c0c; } .swiper-box{   display: block;   height: 100%;   width: 100%;   overflow: hidden;  } .swiper-box view{   text-align: center; }

index.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

//index.js //获取应用实例 var app = getApp() Page( {  data: {   // 页面配置    winWidth: 0,   winHeight: 0,   // tab切换   currentTab: 0,  },  onLoad: function() {   var that = this;   // 获取系统信息   wx.getSystemInfo( {    success: function( res ) {     that.setData( {      winWidth: res.windowWidth,      winHeight: res.windowHeight     });    }   });  },  // 滑动切换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    })   }  } })

来源：http://www.jb51.net/article/103803.htm