话不多说，先看效果图：
下面直接贴代码：
wxml:
<!-- 选择颜色 -->
<
view
class=
"Choosecolor">
<
view
class=
"colortext">选择颜色
</
view
>
<
view
class=
"colorview">
<
view
class=
"{{curIndex==index ?'itemview':'itemviewss'}}"
bindtap=
"ChooseColor"
data-item=
"{{item}}"
data-index=
"{{index}}"
wx:for=
"{{color}}">{{item.color}}
</
view
>
</
view
>
</
view
>
<
text
>你选的是：{{title}}
</
text
>
css:
/* 选择颜色 */
.Choosecolor {
width:
94%;
margin:
0
auto;
border-radius:
15
rpx;
padding-bottom:
25
rpx;
background-color:
white;
}
.colortext {
width:
100%;
font-size:
32
rpx;
font-family: 微软雅黑;
text-align:
center;
padding:
25
rpx
0
0
0;
}
.colorview {
width:
100%;
display:
flex;
flex-wrap:
wrap;
}
.itemview {
width:
200
rpx;
height:
75
rpx;
margin-left:
25
rpx;
margin-top:
25
rpx;
text-align:
center;
line-height:
75
rpx;
font-size:
30
rpx;
font-family: 微软雅黑;
background-color:
#dbf5fe;
border:
2
rpx
#1bb6ea
solid;
border-radius:
10
rpx;
}
.itemviewss {
width:
200
rpx;
height:
75
rpx;
margin-left:
25
rpx;
margin-top:
25
rpx;
text-align:
center;
line-height:
75
rpx;
font-size:
28
rpx;
font-family: 微软雅黑;
background-color:
white;
border:
2
rpx
#efeff4
solid;
border-radius:
10
rpx;
}
js；
Page({
data: {
itemview:
false,
color: [
{ color:
"红色" },
{ color:
"橙色" },
{ color:
"黄色" },
]
},
ChooseColor:
function (res) {
var that =
this
console.log(
"你选的是：", res.target.dataset.item.color)
var index = res.target.dataset.index
console.log(index,
"index index ")
console.log(that.data.itemview,
"that.data.itemview ")
if (that.data.itemview ==
false) {
that.setData({
itemview:
true,
})
}
else {
that.setData({
itemview:
false
})
}
that.setData({
curIndex: index,
title: res.target.dataset.item.color
})
},
})
扫描二维码关注公众号，回复：
4007457 查看本文章
