微信小程序选项卡切换

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

结构部分:

<

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:

2

rpx

solid #ccc ;

text-align:

center

;

height:

88

rpx

;

line-height:

88

rpx

;

font-weight:

bold

;

}

.swiper-tab-item

{

display:

inline-block

;

width:

33.33%

;

color:

red

;

}

.active

{

color:

aqua

;

border-bottom:

4

rpx

solid

red

;

}