作者：勿缘无悔 | 来源：互联网 | 2023-05-19 10:56
微信小程序里没有自带选项卡组件，但是却带有swiper组件，所以，我们便利用swiper来实现选项卡的功能。
先看效果图：
实现代码：
页面代码：
|
1
2
3
4
5
6
7
8
9
10
11
|
"swiper-tab"
>
"swiper-tab-item {{currentTab==0?'active':''}}"
data-current=
"0"
bindtap=
"clickTab"
>一
"swiper-tab-item {{currentTab==1?'active':''}}"
data-current=
"1"
bindtap=
"clickTab"
>二
"swiper-tab-item {{currentTab==2?'active':''}}"
data-current=
"2"
bindtap=
"clickTab"
>三
"{{currentTab}}"
duration=
"300"
bindchange=
"swiperTab"
>
第一屏
第二屏
第三屏
|
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
|
var
app=getApp()
Page({
data:{
currentTab:0
},
onLoad:
function
(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
})
}
}
})
|
css代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.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;
}
|
京公网安备 11010802041100号