微信小程序选项卡切换

在开发微信小程序的时候，会遇到选项卡切换，这里有一个小例子，可以做为参考，代码如下

结构部分:

<view
class="swiper-tab">
<view
class="swiper-tab-item {{currentTab==0?'active':''}}"
data-current="0"
bindtap="clickTab">热点</view>
<view
class="swiper-tab-item {{currentTab==1?'active':''}}"
data-current="1"
bindtap="clickTab">体育</view>
<view
class="swiper-tab-item {{currentTab==2?'active':''}}"
data-current="2"
bindtap="clickTab">社会</view>
</view>

<swiper
current="{{currentTab}}"
duration="300"
bindchange="swiperTab">
<swiper-item><view>热点</view></swiper-item>
<swiper-item><view>体育</view></swiper-item>
<swiper-item><view>社会</view></swiper-item>
</swiper>

JS部分

var app = getApp()
Page({
data: {
currentTab: 0
},
onLoad: function
(options)
{
// 页面初始化 options为页面跳转所带来的参数

},
//滑动切换
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
})
}
}

})

样式部分

.swiper-tab{
width: 100%;
border-bottom:
2rpx solid #ccc;
text-align: center;
height: 88rpx;
line-height:
88rpx;
font-weight:
bold;
}
.swiper-tab-item{
display: inline-block;
width: 33.33%;
color:red;
}
.active{
color:aqua;
border-bottom:
4rpx solid
red;
}