1.

1.项目目录

2.

2.逻辑层

3.

broadcast.js

//pages/broadcast/broadcast.jsPage({/***页面的初始数据*/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:[]},/***生命周期函数--监听页面加载*/onLoad:function(options){},/***生命周期函数--监听页面初次渲染完成*/onReady:function(){},/***生命周期函数--监听页面显示*/onShow:function(){this.setData({includeGroup:this.data.commodityAttr});this.distachAttrValue(this.data.commodityAttr);//只有一个属性组合的时候默认选中//console.log(this.data.attrValueList);if(this.data.commodityAttr.length1){for(vari0;ithis.data.commodityAttr[0].attrValueList.length;i++){this.data.attrValueList[i].selectedValuethis.data.commodityAttr[0].attrValueList[i].attrValue;}this.setData({attrValueList:this.data.attrValueList});}},/*获取数据*/distachAttrValue:function(commodityAttr){/**将后台返回的数据组合成类似{attrKey:'型号',attrValueList:['1','2','3']}*///把数据对象的数据（视图使用），写到局部内varattrValueListthis.data.attrValueList;//遍历获取的数据for(vari0;icommodityAttr.length;i++){for(varj0;jcommodityAttr[i].attrValueList.length;j++){varattrIndexthis.getAttrIndex(commodityAttr[i].attrValueList[j].attrKey,attrValueList);//console.log('属性索引',attrIndex);//如果还没有属性索引为-1，此时新增属性并设置属性值数组的第一个值；索引大于等于0，表示已存在的属性名的位置if(attrIndex0){//如果属性值数组中没有该值，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(vari0;iattrValueList.length;i++){for(varj0;jattrValueList[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(vari0;iattrValueList.length;i++){if(attrNameattrValueList[i].attrKey){break;}}returniattrValueList.length?i:-1;},isValueExist:function(value,valueArr){//判断是否已有属性值for(vari0;ivalueArr.length;i++){if(valueArr[i]value){break;}}returnivalueArr.length;},/*选择属性值事件*/selectAttrValue:function(e){/*点选属性值，联动判断其他属性值是否可选{attrKey:'型号',attrValueList:['1','2','3'],selectedValue:'1',attrValueStatus:[true,true,true]}console.log(e.currentTarget.dataset);*/varattrValueListthis.data.attrValueList;varindexe.currentTarget.dataset.index;//属性索引varkeye.currentTarget.dataset.key;varvaluee.currentTarget.dataset.value;if(e.currentTarget.dataset.status||indexthis.data.firstIndex){if(e.currentTarget.dataset.selectedvaluee.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);varincludeGroup[];if(indexthis.data.firstIndex!unselectStatus){//如果是第一个选中的属性值，则该属性所有值可选varcommodityAttrthis.data.commodityAttr;//其他选中的属性值全都置空//console.log('其他选中的属性值全都置空',index,this.data.firstIndex,!unselectStatus);for(vari0;iattrValueList.length;i++){for(varj0;jattrValueList[i].attrValues.length;j++){attrValueList[i].selectedValue'';}}}else{varcommodityAttrthis.data.includeGroup;}//console.log('选中',commodityAttr,index,key,value);for(vari0;icommodityAttr.length;i++){for(varj0;jcommodityAttr[i].attrValueList.length;j++){if(commodityAttr[i].attrValueList[j].attrKeykeycommodityAttr[i].attrValueList[j].attrValuevalue){includeGroup.push(commodityAttr[i]);}}}attrValueList[index].selectedValuevalue;//判断属性是否可选for(vari0;iattrValueList.length;i++){for(varj0;jattrValueList[i].attrValues.length;j++){attrValueList[i].attrValueStatus[j]false;}}for(vark0;kattrValueList.length;k++){for(vari0;iincludeGroup.length;i++){for(varj0;jincludeGroup[i].attrValueList.length;j++){if(attrValueList[k].attrKeyincludeGroup[i].attrValueList[j].attrKey){for(varm0;mattrValueList[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});varcount0;for(vari0;iattrValueList.length;i++){for(varj0;jattrValueList[i].attrValues.length;j++){if(attrValueList[i].selectedValue){count++;break;}}}if(count2){//第一次选中，同属性的值都可选this.setData({firstIndex:index});}else{this.setData({firstIndex:-1});}},/*取消选中*/disSelectValue:function(attrValueList,index,key,value){varcommodityAttrthis.data.commodityAttr;attrValueList[index].selectedValue'';//判断属性是否可选for(vari0;iattrValueList.length;i++){for(varj0;jattrValueList[i].attrValues.length;j++){attrValueList[i].attrValueStatus[j]true;}}this.setData({includeGroup:commodityAttr,attrValueList:attrValueList});for(vari0;iattrValueList.length;i++){if(attrValueList[i].selectedValue){this.selectValue(attrValueList,i,attrValueList[i].attrKey,attrValueList[i].selectedValue,true);}}},/*点击确定*/submit:function(){varvalue[];for(vari0;ithis.data.attrValueList.length;i++){if(!this.data.attrValueList[i].selectedValue){break;}value.push(this.data.attrValueList[i].selectedValue);}if(ithis.data.attrValueList.length){wx.showToast({title:'请完善属性',icon:'loading',duration:1000})}else{wx.showToast({title:'选择的属性：'+value.join('-'),icon:'sucess',duration:1000})}}})4.

3.页面布局

5.

broadcast.wxml

!--pages/broadcast/broadcast.wxml--viewclass"title"商品属性值联动选择/view!--options--viewclass"commodity_attr_list"!--每组属性--viewclass"attr_box"wx:for"{{attrValueList}}"wx:for-item"attrValueObj"wx:for-index"attrIndex"wx:key"id"!--属性名--viewclass"attr_name"{{attrValueObj.attrKey}}/view!--属性值--viewclass"attr_value_box"!--每个属性值--viewclass"attr_value{{attrIndexfirstIndex||attrValueObj.attrValueStatus[valueIndex]?(valueattrValueObj.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"wx:key"id"{{value}}/view/view/view/view!--button--viewclass"weui-btn-area"buttonclass"weui-btn"type"primary"bindtap"submit"确定/button/view6.

4.样式

7.

broadcast.wxss

/*pages/broadcast/broadcast.wxss*/.title{padding:10rpx20rpx;margin:10rpx0;border-left:4rpxsolid#ccc;}/*全部属性的主盒子*/.commodity_attr_list{background:#fff;padding:020rpx;font-size:26rpx;overflow:hidden;width:100%;}/*每组属性的主盒子*/.attr_box{width:100%;overflow:hidden;border-bottom:1rpxsolid#ececec;}/*属性名*/.attr_name{width:20%;float:left;padding:15rpx0;}/*属性值*/.attr_value_box{width:80%;float:left;padding:15rpx0;overflow:hidden;}/*每个属性值*/.attr_value{float:left;padding:010rpx;margin:010rpx;border:1rpxsolid#ececec;}/*每个属性选中的当前样式*/.attr_value_active{background:#FFCC00;border-radius:10rpx;color:#fff;padding:010rpx;}/*禁用属性*/.attr_value_disabled{color:#ccc;}/*button*/.btn-area{margin:1.17647059em15px0.3em;}.btn{margin-top:15px;background-color:#FFCC00;color:#fff;}.btn:first-child{margin-top:0;}8.

5.效果图