微信小程序商城项目中商品属性分类的实现

<view>商品属性值联动选择</view> <!--options--> <view>  <!--每组属性-->  <view>  <!--属性名-->  <view>{{attrValueObj.attrKey}}</view>  <!--属性值-->  <view>  <!--每个属性值-->  <view>{{value}}</view>  </view>  </view> </view> <!--button--> <view>  <button>确定</button> </view>

.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; }

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 = 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 <p></p><p>运行效果：</p><p style="text-align: center"><img id="theimg" alt="" src="https://img.php.cn/upload/article/000/000/009/823c1c64f74053c1c6f8182bf312642c-2.gif"></p><p>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！</p><p>