微信小程序商城项目之商品属性分类（4）

续上一篇的文章：
所提及的购物数量的加减，现在说说商品属性值联动选择。

为了让同学们有个直观的了解，到电商网截了一个图片，就是红圈所示的部分

现在就为大家介绍这个小组件，在小程序中，该如何去写
下图为本项目的图：

wxml：

<view class="title">商品属性值联动选择</view> 
<!--options--> 
<view class="commodity_attr_list"> 
 <!--每组属性--> 
 <view class="attr_box" wx:for="{{attrvaluelist}}" wx:for-item="attrvalueobj" wx:for-index="attrindex"> 
 <!--属性名--> 
 <view class="attr_name">{{attrvalueobj.attrkey}}</view> 
 <!--属性值--> 
 <view class="attr_value_box"> 
 <!--每个属性值--> 
 <view class="attr_value {{attrindex==firstindex || attrvalueobj.attrvaluestatus[valueindex]?(value==attrvalueobj.selectedvalue?'attr_value_active':''):'attr_value_disabled'}}" bindtap="selectattrvalue" data-status="{{attrvalueobj.attrvaluestatus[valueindex]}}" 
 data-value="{{value}}" data-key="{{attrvalueobj.attrkey}}" data-index="{{attrindex}}" data-selectedvalue="{{attrvalueobj.selectedvalue}}" wx:for="{{attrvalueobj.attrvalues}}" wx:for-item="value" wx:for-index="valueindex">{{value}}</view> 
 </view> 
 </view> 
</view> 
<!--button--> 
<view class="weui-btn-area"> 
 <button class="weui-btn" type="primary" bindtap="submit">确定</button> 
</view> 

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": "黑色" 
 }, 
 { 
 "attrkey": "大小", 
 "attrvalue": "小" 
 }, 
 { 
 "attrkey": "尺寸", 
 "attrvalue": "m" 
 } 
 ] 
 }, 
 { 
 priceid: 3, 
 price: 35.2, 
 "stock": 10, 
 "attrvaluelist": [ 
 { 
 "attrkey": "型号", 
 "attrvalue": "1" 
 }, 
 { 
 "attrkey": "颜色", 
 "attrvalue": "绿色" 
 }, 
 { 
 "attrkey": "大小", 
 "attrvalue": "大" 
 }, 
 { 
 "attrkey": "尺寸", 
 "attrvalue": "l" 
 } 
 ] 
 }, 
 { 
 priceid: 4, 
 price: 35.2, 
 "stock": 10, 
 "attrvaluelist": [ 
 { 
 "attrkey": "型号", 
 "attrvalue": "1" 
 }, 
 { 
 "attrkey": "颜色", 
 "attrvalue": "绿色" 
 }, 
 { 
 "attrkey": "大小", 
 "attrvalue": "大" 
 }, 
 { 
 "attrkey": "尺寸", 
 "attrvalue": "l" 
 } 
 ] 
 } 
 ], 
 attrvaluelist: [] 
 }, 
 onshow: function () { 
 this.setdata({ 
 includegroup: this.data.commodityattr 
 }); 
 this.distachattrvalue(this.data.commodityattr); 
 // 只有一个属性组合的时候默认选中 
 // console.log(this.data.attrvaluelist); 
 if (this.data.commodityattr.length == 1) { 
 for (var i = 0; i < this.data.commodityattr[0].attrvaluelist.length; i++) { 
 this.data.attrvaluelist[i].selectedvalue = this.data.commodityattr[0].attrvaluelist[i].attrvalue; 
 } 
 this.setdata({ 
 attrvaluelist: this.data.attrvaluelist 
 }); 
 } 
 }, 
 /* 获取数据 */ 
 distachattrvalue: function (commodityattr) { 
 /** 
 将后台返回的数据组合成类似 
 { 
 attrkey:'型号', 
 attrvaluelist:['1','2','3'] 
 } 
 */ 
 // 把数据对象的数据（视图使用），写到局部内 
 var attrvaluelist = this.data.attrvaluelist; 
 // 遍历获取的数据 
 for (var i = 0; i < commodityattr.length; i++) { 
 for (var j = 0; j < commodityattr[i].attrvaluelist.length; j++) { 
 var attrindex = this.getattrindex(commodityattr[i].attrvaluelist[j].attrkey, attrvaluelist); 
 // console.log('属性索引', attrindex); 
 // 如果还没有属性索引为-1，此时新增属性并设置属性值数组的第一个值；索引大于等于0，表示已存在的属性名的位置 
 if (attrindex >= 0) { 
 // 如果属性值数组中没有该值，push新值；否则不处理 
 if (!this.isvalueexist(commodityattr[i].attrvaluelist[j].attrvalue, attrvaluelist[attrindex].attrvalues)) { 
 attrvaluelist[attrindex].attrvalues.push(commodityattr[i].attrvaluelist[j].attrvalue); 
 } 
 } else { 
 attrvaluelist.push({ 
 attrkey: commodityattr[i].attrvaluelist[j].attrkey, 
 attrvalues: [commodityattr[i].attrvaluelist[j].attrvalue] 
 }); 
 } 
 } 
 } 
 // console.log('result', attrvaluelist) 
 for (var i = 0; i < attrvaluelist.length; i++) { 
 for (var j = 0; j < attrvaluelist[i].attrvalues.length; j++) { 
 if (attrvaluelist[i].attrvaluestatus) { 
 attrvaluelist[i].attrvaluestatus[j] = true; 
 } else { 
 attrvaluelist[i].attrvaluestatus = []; 
 attrvaluelist[i].attrvaluestatus[j] = true; 
 } 
 } 
 } 
 this.setdata({ 
 attrvaluelist: attrvaluelist 
 }); 
 }, 
 getattrindex: function (attrname, attrvaluelist) { 
 // 判断数组中的attrkey是否有该属性值 
 for (var i = 0; i < attrvaluelist.length; i++) { 
 if (attrname == attrvaluelist[i].attrkey) { 
 break; 
 } 
 } 
 return i < attrvaluelist.length ? i : -1; 
 }, 
 isvalueexist: function (value, valuearr) { 
 // 判断是否已有属性值 
 for (var i = 0; i < valuearr.length; i++) { 
 if (valuearr[i] == value) { 
 break; 
 } 
 } 
 return i < valuearr.length; 
 }, 
 /* 选择属性值事件 */ 
 selectattrvalue: function (e) { 
 /* 
 点选属性值，联动判断其他属性值是否可选 
 { 
 attrkey:'型号', 
 attrvaluelist:['1','2','3'], 
 selectedvalue:'1', 
 attrvaluestatus:[true,true,true] 
 } 
 console.log(e.currenttarget.dataset); 
 */ 
 var attrvaluelist = this.data.attrvaluelist; 
 var index = e.currenttarget.dataset.index;//属性索引 
 var key = e.currenttarget.dataset.key; 
 var value = e.currenttarget.dataset.value; 
 if (e.currenttarget.dataset.status || index == this.data.firstindex) { 
 if (e.currenttarget.dataset.selectedvalue == e.currenttarget.dataset.value) { 
 // 取消选中 
 this.disselectvalue(attrvaluelist, index, key, value); 
 } else { 
 // 选中 
 this.selectvalue(attrvaluelist, index, key, value); 
 } 
 
 } 
 }, 
 /* 选中 */ 
 selectvalue: function (attrvaluelist, index, key, value, unselectstatus) { 
 // console.log('firstindex', this.data.firstindex); 
 var includegroup = []; 
 if (index == this.data.firstindex && !unselectstatus) { // 如果是第一个选中的属性值，则该属性所有值可选 
 var commodityattr = this.data.commodityattr; 
 // 其他选中的属性值全都置空 
 // console.log('其他选中的属性值全都置空', index, this.data.firstindex, !unselectstatus); 
 for (var i = 0; i < attrvaluelist.length; i++) { 
 for (var j = 0; j < attrvaluelist[i].attrvalues.length; j++) { 
 attrvaluelist[i].selectedvalue = ''; 
 } 
 } 
 } else { 
 var commodityattr = this.data.includegroup; 
 } 
 
 // console.log('选中', commodityattr, index, key, value); 
 for (var i = 0; i < commodityattr.length; i++) { 
 for (var j = 0; j < commodityattr[i].attrvaluelist.length; j++) { 
 if (commodityattr[i].attrvaluelist[j].attrkey == key && commodityattr[i].attrvaluelist[j].attrvalue == value) { 
 includegroup.push(commodityattr[i]); 
 } 
 } 
 } 
 attrvaluelist[index].selectedvalue = value; 
 
 // 判断属性是否可选 
 for (var i = 0; i < attrvaluelist.length; i++) { 
 for (var j = 0; j < attrvaluelist[i].attrvalues.length; j++) { 
 attrvaluelist[i].attrvaluestatus[j] = false; 
 } 
 } 
 for (var k = 0; k < attrvaluelist.length; k++) { 
 for (var i = 0; i < includegroup.length; i++) { 
 for (var j = 0; j < includegroup[i].attrvaluelist.length; j++) { 
 if (attrvaluelist[k].attrkey == includegroup[i].attrvaluelist[j].attrkey) { 
 for (var m = 0; m < attrvaluelist[k].attrvalues.length; m++) { 
 if (attrvaluelist[k].attrvalues[m] == includegroup[i].attrvaluelist[j].attrvalue) { 
 attrvaluelist[k].attrvaluestatus[m] = true; 
 } 
 } 
 } 
 } 
 } 
 } 
 // console.log('结果', attrvaluelist); 
 this.setdata({ 
 attrvaluelist: attrvaluelist, 
 includegroup: includegroup 
 }); 
 
 var count = 0; 
 for (var i = 0; i < attrvaluelist.length; i++) { 
 for (var j = 0; j < attrvaluelist[i].attrvalues.length; j++) { 
 if (attrvaluelist[i].selectedvalue) { 
 count++; 
 break; 
 } 
 } 
 } 
 if (count < 2) {// 第一次选中，同属性的值都可选 
 this.setdata({ 
 firstindex: index 
 }); 
 } else { 
 this.setdata({ 
 firstindex: -1 
 }); 
 } 
 }, 
 /* 取消选中 */ 
 disselectvalue: function (attrvaluelist, index, key, value) { 
 var commodityattr = this.data.commodityattr; 
 attrvaluelist[index].selectedvalue = ''; 
 
 // 判断属性是否可选 
 for (var i = 0; i < attrvaluelist.length; i++) { 
 for (var j = 0; j < attrvaluelist[i].attrvalues.length; j++) { 
 attrvaluelist[i].attrvaluestatus[j] = true; 
 } 
 } 
 this.setdata({ 
 includegroup: commodityattr, 
 attrvaluelist: attrvaluelist 
 }); 
 
 for (var i = 0; i < attrvaluelist.length; i++) { 
 if (attrvaluelist[i].selectedvalue) { 
 this.selectvalue(attrvaluelist, i, attrvaluelist[i].attrkey, attrvaluelist[i].selectedvalue, true); 
 } 
 } 
 }, 
 /* 点击确定 */ 
 submit: function () { 
 var value = []; 
 for (var i = 0; i < this.data.attrvaluelist.length; i++) { 
 if (!this.data.attrvaluelist[i].selectedvalue) { 
 break; 
 } 
 value.push(this.data.attrvaluelist[i].selectedvalue); 
 } 
 if (i < this.data.attrvaluelist.length) { 
 wx.showtoast({ 
 title: '请完善属性', 
 icon: 'loading', 
 duration: 1000 
 }) 
 } else { 
 wx.showtoast({ 
 title: '选择的属性：' + value.join('-'), 
 icon: 'sucess', 
 duration: 1000 
 }) 
 } 
 } 
}) 

运行效果：

demo地址：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。