单个选项：
wxml页面：
<
view
class=
'changeBox'>
<
view
bindtap=
"changeBoxBtn"
wx:for=
'{{changeBoxs}}'
wx:for-index=
'index'
class=
"{{num==index?'changeBox-act':''}}"
data-num=
"{{index}}">{{item.name}}
</
view
>
</
view
>
wxss页面：
.changeBox{
display:
flex;
align-items:
center;
/* justify-content: center; */
flex-wrap:
wrap;
padding-left:
3.6%;
}
.changeBox
view{
width:
30%;
background:
#eee;
display:
flex;
align-items:
center;
justify-content:
center;
padding:
0.5rem
0;
border-radius:
30px;
margin:
0.5rem
1%;
margin-top:
1rem;
}
.changeBox
.changeBox-act{
background:
#F5A623;
color:
#fff;
}
js页面：
// 创建循环
var changeBoxs = [{ name:
'包厢1' }, { name:
'包厢2' }, { name:
'包厢3' }, { name:
'包厢4' }, { name:
'包厢5' }, { name:
'包厢6' }, { name:
'包厢7' }, { name:
'包厢8' }]
// 选择包厢（点击事件）
changeBoxBtn:
function(e){
console.log(e.target.dataset.num)
this.setData({
num: e.target.dataset.num
})
}
多个选项
wxml页面：
<
view
wx:for=
"{{gradeds}}"
class=
"{{item.state==1?'graded-act':''}}"
bindtap=
"select_act"
data-key=
'{{index}}'>{{item.txt}}
</
view
>
wxss页面：
.graded-bot{
display:
flex;
flex-wrap:
wrap;
}
.graded-bot
view{
padding:
0.2rem
0.5rem;
margin:
0.2rem;
background:
#ccc;
font-size:
12px;
border-radius:
30px;
}
.graded-bot
.graded-act{
background:
#F5A623;
color:
#fff;
}
js页面：
select_act:
function(e) {
var index = e.currentTarget.dataset.key;
if(
this.data.gradeds[index].state ==
1) {
this.data.gradeds[index].state =
0;
}
else
if (
this.data.gradeds[index].state ==
0) {
this.data.gradeds[index].state =
1;
}
this.setData({
gradeds:
this.data.gradeds,
});
}
注意：返回数据中要有state，如：var gradeds = [{ txt: '砂锅小龙虾',state:0 }
主要区别：类名判断，js的this.setData加载是单个还是数组