微信小程序里没有自带选项卡组件，但是却带有swiper组件，所以，我们便利用swiper来实现选项卡的功能。

先看效果图：

wxml代码：

一视图类='swiper-tab' 2视图类=' swiper-tab-item { { CurrentTab==0 '？活动' :''}} '数据-当前='0' bindtap='clickTab '一/view 3 view class=' swiper-tab-item { { CurrentTab==1 '？活动' :''}} '数据-当前='1' bindtap='clickTab '二/view 4 view class=' swiper-tab-item { { CurrentTab==2 '？活动' :''}} '数据-当前='2' bindtap='clickTab '三/view 5/view 6 7 swiper current=' { { CurrentTab } } ' duration=' 300 ' bind change=' Swipertab ' 8 swiper-item view第一屏/view/swiper-item 9 swiper-item视图第二屏/view/swiper-item 10 swiper-item视图第三屏/view/swiper-item11 /swiper12 js代码

32 var app=GetApp()33 Page({ 34 data : { 35 current ttab :036 }，37 onLoad:function(选项){38 //页面初始化选择为页面跳转所带来的参数39 40 },41 //滑动切换42 Swipertab :函数(e){ 43 var那=这个；44那个。setdata({ 45当前ba : e . detail。当前46 })；47 },48 //点击切换49点击表：函数{ 50 51 var即=这个；52 53如果(这个。数据。当前选项卡===e . target。数据集。当前){ 54返回否则。setdata({ 57当前ttab : e .目标。数据集。当前58 })59 } 60 } 61 62 })CSS代码

18 .swiper-tab{19宽度： 100%;20边框-底部： 2rpx实心# ccc21文本-对齐：中心；22 height: 88rpx23线-高度： 88 rpx24字体粗细：粗体；25 }26 .swiper-tab-item { 27 display : inline-block；28横向： 33.33%;29颜色：红色；30 }31 .活性{ 32 color:aqua33边框-底部： 4rpx纯红；34 }