小程序属性单项选择

话不多说，先看效果图：

下面直接贴代码：

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

})

},

})