1.wxml页面代码:
<!--选项卡-->
<
view
class
=
"tabTit box tc bg_f">
<
view
class
=
"flex1{{tab[index]?' active':''}}"
wx:for
=
"{{tabTxt}}"
wx:key
=
""
data-index
=
"{{index}}"
bindtap
=
"filterTab">
<
text
>
{{item}}
</
text
>
<
image
wx:if
=
"{{index === tabTxt.length-1}}"
src
=
"/images/arrow.png"></
image
>
</
view
>
</
view
>
<!--筛选项-->
<
view
class
=
"tabLayer tc"
hidden
=
"{{!tabFlag}}">
<
text
class
=
"{{tabAll==0?'active':''}}"
data-id
=
"0"
data-index
=
"4"
data-txt
=
"全选"
bindtap
=
"filter">
不限
</
text
>
<
text
class
=
"{{tabAll==item.id?'active':''}}"
wx:for
=
"{{tabList}}"
wx:key
=
""
data-id
=
"{{item.id}}"
data-index
=
"4"
data-txt
=
"{{item.name}}"
bindtap
=
"filter">
{{item.name}}
</
text
>
</
view
>
2.app.wxss中添加如下样式:
/* tab下拉样式 */
.bg_f
{
background:
#fff
}
.flex1
{
-webkit-box-flex:
1
;
-webkit-flex:
1
;
-ms-flex:
1
;
box-flex:
1
;
flex:
1
;
overflow:
hidden
;
display:
block
;
}
.box
{
display:
-webkit-box
;
display:
-webkit-flex
;
display:
-ms-flexbox
;
display:
flex
;
}
3.wxss页面代码:
/* tab下拉样式 */
.tabTit
{
height:
90
rpx
;
line-height:
90
rpx
;
border-bottom:
solid
1px
#eee
;
position:
fixed
;
top:
0
;
width:
750
rpx
;
z-index:
1
;
background:
#f5f5f5
;}
.tabTit
.active
{
color:
#e64340
;
background:
#fff
;}
.tabTit
.active
image
{
transform:
rotate(
180deg
)
;
background:
none
;}
.tabTit
image
{
width:
26
rpx
;
height:
26
rpx
;
vertical-align:
middle
;
margin-left:
5px
;}
.tabLayer
{
box-shadow:
0
5px
5px
rgba(
0
,
0
,
0
,
.15
)
;
width:
750
rpx
;
overflow:
hidden
;
position:
fixed
;
top:
90
rpx
;
z-index:
1
;
background:
#fff
;
padding-bottom:
26
rpx
;
border-bottom:
solid
1px
#eee
;}
.tabLayer
text
{
width:
210
rpx
;
height:
60
rpx
;
line-height:
60
rpx
;
float:
left
;
border:
solid
1px
#eee
;
margin:
20
rpx
0
0
26
rpx
;}
.tabLayer
.active
{
color:
#e64340
;
border-color:
#e64340
;}
4.js页面代码:
data数据定义部分:
tabAll:
0
,
//是否选中
tabFlag:
false
,
tabTxt: [
'首页'
,
'男装'
,
'鞋包'
,
'手机'
,
'全部'
],
//tab文案
tab: [
true
,
false
,
false
,
false
,
false
],
tabList: [{ name:
'电器'
, id:
'5'
}, { name:
'食品'
, id:
'6'
},
{ name:
'百货'
, id:
'7'
}, { name:
'服饰'
, id:
'8'
},
{ name:
'汽车'
, id:
'9'
}, { name:
'家装'
, id:
'10'
},
{ name:
'运动'
, id:
'11'
}, { name:
'母婴'
, id:
'12'
},
{ name:
'水果'
, id:
'13'
}, { name:
'内衣'
, id:
'14'
},
{ name:
'家纺'
, id:
'15'
}, { name:
'美妆'
, id:
'16'
}]
函数部分:
// 选项卡
filterTab:
function
(e) {
var
data = [
false
,
false
,
false
,
false
,
false
], index = e.currentTarget.dataset.index;
data[index] = !
this
.data.tab[index];
if
(index ==
4
) {
this
.setData({
tabFlag:
true
})
}else{
this
.setData({
tabFlag:
false
})
}
this
.setData({
tab: data,
})
},
//筛选项点击操作
filter:
function
(e) {
var
self =
this
, id = e.currentTarget.dataset.id, txt = e.currentTarget.dataset.txt, tabTxt =
this
.data.tabTxt, index = e.currentTarget.dataset.index;
tabTxt[index] = txt;
self.setData({
tabTxt: tabTxt,
tabAll: id,
tab: [
false
,
false
,
false
,
false
,
true
],
tabFlag:
false
});
},
5.运行截图:
小程序教程地址:小程序教程集合地址
如果大家对文章有什么问题或者疑意之类的、想要源代码的、想看更多此类文章的,都可以可以加我订阅号,订阅号上面我会定期更新最新博客和资源。 如果嫌麻烦可以直接加我wechat:lzqcode