微信小程序之商品属性分类-——-微信小程序实战商城系列（4）(1)

wxss：

.title {
padding: 10rpx 20rpx;
margin: 10rpx 0;
border-left: 4rpx solid #ccc;
}

/全部属性的主盒子/
.commodity_attr_list {
background: #fff;
padding: 0 20rpx;
font-size: 26rpx;
overflow: hidden;
width: 100%;
}
/每组属性的主盒子/
.attr_box {
width: 100%;
overflow: hidden;
border-bottom: 1rpx solid #ececec;
}
/属性名/
.attr_name {
width: 20%;
float: left;
padding: 15rpx 0;
}
/属性值/
.attr_value_box {
width: 80%;
float: left;
padding: 15rpx 0;
overflow: hidden;
}
/每个属性值/
.attr_value {
float: left;
padding: 0 10rpx;
margin: 0 10rpx;
border: 1rpx solid #ececec;
}
/每个属性选中的当前样式/
.attr_value_active {
background: #FFCC00;
border-radius: 10rpx;
color: #fff;
padding: 0 10rpx;
}
/禁用属性/
.attr_value_disabled {
color: #ccc;
}

/button/
.btn-area {
margin: 1.17647059em 15px 0.3em;
}

.btn {
margin-top: 15px;
background-color:#FFCC00;
color: #fff;
}
.btn:first-child {
margin-top: 0;
}

js：

数据部分，一般情况都是访问接口获取数据的，这里并没有使用网络访问，为了简化demo，直接把一组数据放在data对象中。

Page({
data: {
firstIndex: -1,
//准备数据
//数据结构：以一组一组来进行设定
commodityAttr: [
{
priceId: 1,
price: 35.0,
“stock”: 8,
“attrValueList”: [
{
“attrKey”: “型号”,
“attrValue”: “2”
},
{
“attrKey”: “颜色”,
“attrValue”: “白色”
},
{
“attrKey”: “大小”,
“attrValue”: “小”
},
{
“attrKey”: “尺寸”,
“attrValue”: “S”
}
]
},
{
priceId: 2,
price: 35.1,
“stock”: 9,
“attrValueList”: [
{
“attrKey”: “型号”,
“attrValue”: “1”
},
{
“attrKey”: “颜色”,
“attrValue”: “黑色”
},
{
“a