微信小程序里没有自带选项卡组件，但是却带有swiper组件，所以，我们便利用swiper来实现选项卡的功能。
先看效果图：
wxml代码：
1 <view class="swiper-tab"> 2 <view class="swiper-tab-item {{currentTab==0?‘active‘:‘‘}}" data-current="0" bindtap="clickTab">一</view> 3 <view class="swiper-tab-item {{currentTab==1?‘active‘:‘‘}}" data-current="1" bindtap="clickTab">二</view> 4 <view class="swiper-tab-item {{currentTab==2?‘active‘:‘‘}}" data-current="2" bindtap="clickTab">三</view> 5 </view> 6 7 <swiper current="{{currentTab}}" duration="300" bindchange="swiperTab"> 8 <swiper-item><view>第一屏</view></swiper-item> 9 <swiper-item><view>第二屏</view></swiper-item>10 <swiper-item><view>第三屏</view></swiper-item>11 </swiper>12
js代码
1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 910 1011 1112 1213 1314 1415 1516 1617 1718 1819 1920 2021 2122 2223 2324 2425 2526 2627 2728 2829 2930 3031 3132 var app=getApp()33 Page({34 data:{35 currentTab:036 },37 onLoad:function(options){38 // 页面初始化 options为页面跳转所带来的参数39 40 },41 //滑动切换42 swiperTab:function( e ){43 var that=this;44 that.setData({45 currentTba:e.detail.current46 });47 },48 //点击切换49 clickTab: function( e ) { 50 51 var that = this; 52 53 if( this.data.currentTab === e.target.dataset.current ) { 54 return false; 55 } else { 56 that.setData( { 57 currentTab: e.target.dataset.current 58 }) 59 } 60 } 61 62 })
css代码
1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 910 1011 1112 1213 1314 1415 1516 1617 1718 .swiper-tab{19 width: 100%;20 border-bottom: 2rpx solid #ccc;21 text-align: center;22 height: 88rpx;23 line-height: 88rpx;24 font-weight: bold;25 }26 .swiper-tab-item{27 display: inline-block;28 width: 33.33%;29 color:red;30 }31 .active{32 color:aqua;33 border-bottom: 4rpx solid red;34 }
