欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 教程

微信小程序实战商城系列《四》商品属性分类

发布：2017-12-09 16:51浏览： 次来源：网络 作者：tianshu

为了让同学们有个直观的了解，到电商网截了一个图片，就是红圈所示的部分现在就为大家介绍这个小组件，在小程序中，该如何去写下图为本项目的图：wxml：view class="title"商品属 ...

 
 
 

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

微信小程序实战商城系列《四》商品属性分类(图1)

 

 

现在就为大家介绍这个小组件，在小程序中，该如何去写

下图为本项目的图：

微信小程序实战商城系列《四》商品属性分类(图2)

 

 

wxml：

[html] view plain copy
 
  1. <view class="title">商品属性值联动选择</view>  
  2. <!--options-->  
  3. <view class="commodity_attr_list">  
  4.   <!--每组属性-->  
  5.   <view class="attr_box" wx:for="{{attrValueList}}" wx:for-item="attrValueObj" wx:for-index="attrIndex">  
  6.     <!--属性名-->  
  7.     <view class="attr_name">{{attrValueObj.attrKey}}</view>  
  8.     <!--属性值-->  
  9.     <view class="attr_value_box">  
  10.       <!--每个属性值-->  
  11.       <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]}}"  
  12.       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>  
  13.     </view>  
  14.   </view>  
  15. </view>  
  16. <!--button-->  
  17. <view class="weui-btn-area">  
  18.   <button class="weui-btn" type="primary" bindtap="submit">确定</button>  
  19. </view>  

 

 

wxss：

[css] view plain copy
 
  1. .title {  
  2.   padding: 10rpx 20rpx;  
  3.   margin: 10rpx 0;  
  4.   border-left: 4rpx solid #ccc;  
  5. }  
  6.   
  7. /*全部属性的主盒子*/  
  8. .commodity_attr_list {  
  9.   background: #fff;  
  10.   padding: 0 20rpx;  
  11.   font-size: 26rpx;  
  12.   overflow: hidden;  
  13.   width: 100%;  
  14. }  
  15. /*每组属性的主盒子*/  
  16. .attr_box {  
  17.   width: 100%;  
  18.   overflow: hidden;  
  19.   border-bottom: 1rpx solid #ececec;  
  20. }  
  21. /*属性名*/  
  22. .attr_name {  
  23.   width: 20%;  
  24.   float: left;  
  25.   padding: 15rpx 0;  
  26. }  
  27. /*属性值*/  
  28. .attr_value_box {  
  29.   width: 80%;  
  30.   float: left;  
  31.   padding: 15rpx 0;  
  32.   overflow: hidden;  
  33. }  
  34. /*每个属性值*/  
  35. .attr_value {  
  36.   float: left;  
  37.   padding: 0 10rpx;  
  38.   margin: 0 10rpx;  
  39.   border: 1rpx solid #ececec;  
  40. }  
  41. /*每个属性选中的当前样式*/  
  42. .attr_value_active {  
  43.   background: #FFCC00;  
  44.   border-radius: 10rpx;  
  45.   color: #fff;  
  46.   padding: 0 10rpx;  
  47. }  
  48. /*禁用属性*/  
  49. .attr_value_disabled {  
  50.   color: #ccc;  
  51. }  
  52.   
  53. /*button*/  
  54. .btn-area {  
  55.   margin: 1.17647059em 15px 0.3em;  
  56. }  
  57.   
  58. .btn {  
  59.   margin-top: 15px;  
  60.   background-color:#FFCC00;  
  61.   color: #fff;  
  62. }  
  63. .btn:first-child {  
  64.   margin-top: 0;  
  65. }  

 

js：

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

 

[javascript] view plain copy
 
  1. Page({  
  2.   data: {  
  3.     firstIndex: -1,  
  4.     //准备数据  
  5.     //数据结构：以一组一组来进行设定  
  6.     commodityAttr: [  
  7.       {  
  8.         priceId: 1,  
  9.         price: 35.0,  
  10.         "stock": 8,  
  11.         "attrValueList": [  
  12.           {  
  13.             "attrKey": "型号",  
  14.             "attrValue": "2"  
  15.           },  
  16.           {  
  17.             "attrKey": "颜色",  
  18.             "attrValue": "白色"  
  19.           },  
  20.           {  
  21.             "attrKey": "大小",  
  22.             "attrValue": "小"  
  23.           },  
  24.           {  
  25.             "attrKey": "尺寸",  
  26.             "attrValue": "S"  
  27.           }  
  28.         ]  
  29.       },  
  30.       {  
  31.         priceId: 2,  
  32.         price: 35.1,  
  33.         "stock": 9,  
  34.         "attrValueList": [  
  35.           {  
  36.             "attrKey": "型号",  
  37.             "attrValue": "1"  
  38.           },  
  39.           {  
  40.             "attrKey": "颜色",  
  41.             "attrValue": "黑色"  
  42.           },  
  43.           {  
  44.             "attrKey": "大小",  
  45.             "attrValue": "小"  
  46.           },  
  47.           {  
  48.             "attrKey": "尺寸",  
  49.             "attrValue": "M"  
  50.           }  
  51.         ]  
  52.       },  
  53.       {  
  54.         priceId: 3,  
  55.         price: 35.2,  
  56.         "stock": 10,  
  57.         "attrValueList": [  
  58.           {  
  59.             "attrKey": "型号",  
  60.             "attrValue": "1"  
  61.           },  
  62.           {  
  63.             "attrKey": "颜色",  
  64.             "attrValue": "绿色"  
  65.           },  
  66.           {  
  67.             "attrKey": "大小",  
  68.             "attrValue": "大"  
  69.           },  
  70.           {  
  71.             "attrKey": "尺寸",  
  72.             "attrValue": "L"  
  73.           }  
  74.         ]  
  75.       },  
  76.       {  
  77.         priceId: 4,  
  78.         price: 35.2,  
  79.         "stock": 10,  
  80.         "attrValueList": [  
  81.           {  
  82.             "attrKey": "型号",  
  83.             "attrValue": "1"  
  84.           },  
  85.           {  
  86.             "attrKey": "颜色",  
  87.             "attrValue": "绿色"  
  88.           },  
  89.           {  
  90.             "attrKey": "大小",  
  91.             "attrValue": "大"  
  92.           },  
  93.           {  
  94.             "attrKey": "尺寸",  
  95.             "attrValue": "L"  
  96.           }  
  97.         ]  
  98.       }  
  99.     ],  
  100.     attrValueList: []  
  101.   },  
  102.   onShow: function () {  
  103.     this.setData({  
  104.       includeGroup: this.data.commodityAttr  
  105.     });  
  106.     this.distachAttrValue(this.data.commodityAttr);  
  107.     // 只有一个属性组合的时候默认选中  
  108.     // console.log(this.data.attrValueList);  
  109.     if (this.data.commodityAttr.length == 1) {  
  110.       for (var i = 0; i < this.data.commodityAttr[0].attrValueList.length; i++) {  
  111.         this.data.attrValueList[i].selectedValue = this.data.commodityAttr[0].attrValueList[i].attrValue;  
  112.       }  
  113.       this.setData({  
  114.         attrValueList: this.data.attrValueList  
  115.       });  
  116.     }  
  117.   },  
  118.   /* 获取数据 */  
  119.   distachAttrValue: function (commodityAttr) {  
  120.     /** 
  121.       将后台返回的数据组合成类似 
  122.       { 
  123.         attrKey:'型号', 
  124.         attrValueList:['1','2','3'] 
  125.       } 
  126.     */  
  127.     // 把数据对象的数据（视图使用），写到局部内  
  128.     var attrValueList = this.data.attrValueList;  
  129.     // 遍历获取的数据  
  130.     for (var i = 0; i < commodityAttr.length; i++) {  
  131.       for (var j = 0; j < commodityAttr[i].attrValueList.length; j++) {  
  132.         var attrIndex = this.getAttrIndex(commodityAttr[i].attrValueList[j].attrKey, attrValueList);  
  133.         // console.log('属性索引', attrIndex);   
  134.         // 如果还没有属性索引为-1，此时新增属性并设置属性值数组的第一个值；索引大于等于0，表示已存在的属性名的位置  
  135.         if (attrIndex >= 0) {  
  136.           // 如果属性值数组中没有该值，push新值；否则不处理  
  137.           if (!this.isValueExist(commodityAttr[i].attrValueList[j].attrValue, attrValueList[attrIndex].attrValues)) {  
  138.             attrValueList[attrIndex].attrValues.push(commodityAttr[i].attrValueList[j].attrValue);  
  139.           }  
  140.         } else {  
  141.           attrValueList.push({  
  142.             attrKey: commodityAttr[i].attrValueList[j].attrKey,  
  143.             attrValues: [commodityAttr[i].attrValueList[j].attrValue]  
  144.           });  
  145.         }  
  146.       }  
  147.     }  
  148.     // console.log('result', attrValueList)  
  149.     for (var i = 0; i < attrValueList.length; i++) {  
  150.       for (var j = 0; j < attrValueList[i].attrValues.length; j++) {  
  151.         if (attrValueList[i].attrValueStatus) {  
  152.           attrValueList[i].attrValueStatus[j] = true;  
  153.         } else {  
  154.           attrValueList[i].attrValueStatus = [];  
  155.           attrValueList[i].attrValueStatus[j] = true;  
  156.         }  
  157.       }  
  158.     }  
  159.     this.setData({  
  160.       attrValueList: attrValueList  
  161.     });  
  162.   },  
  163.   getAttrIndex: function (attrName, attrValueList) {  
  164.     // 判断数组中的attrKey是否有该属性值  
  165.     for (var i = 0; i < attrValueList.length; i++) {  
  166.       if (attrName == attrValueList[i].attrKey) {  
  167.         break;  
  168.       }  
  169.     }  
  170.     return i < attrValueList.length ? i : -1;  
  171.   },  
  172.   isValueExist: function (value, valueArr) {  
  173.     // 判断是否已有属性值  
  174.     for (var i = 0; i < valueArr.length; i++) {  
  175.       if (valueArr[i] == value) {  
  176.         break;  
  177.       }  
  178.     }  
  179.     return i < valueArr.length;  
  180.   },  
  181.   /* 选择属性值事件 */  
  182.   selectAttrValue: function (e) {  
  183.     /* 
  184.     点选属性值，联动判断其他属性值是否可选 
  185.     { 
  186.       attrKey:'型号', 
  187.       attrValueList:['1','2','3'], 
  188.       selectedValue:'1', 
  189.       attrValueStatus:[true,true,true] 
  190.     } 
  191.     console.log(e.currentTarget.dataset); 
  192.     */  
  193.     var attrValueList = this.data.attrValueList;  
  194.     var index = e.currentTarget.dataset.index;//属性索引  
  195.     var key = e.currentTarget.dataset.key;  
  196.     var value = e.currentTarget.dataset.value;  
  197.     if (e.currentTarget.dataset.status || index == this.data.firstIndex) {  
  198.       if (e.currentTarget.dataset.selectedvalue == e.currentTarget.dataset.value) {  
  199.         // 取消选中  
  200.         this.disSelectValue(attrValueList, index, key, value);  
  201.       } else {  
  202.         // 选中  
  203.         this.selectValue(attrValueList, index, key, value);  
  204.       }  
  205.   
  206.     }  
  207.   },  
  208.   /* 选中 */  
  209.   selectValue: function (attrValueList, index, key, value, unselectStatus) {  
  210.     // console.log('firstIndex', this.data.firstIndex);  
  211.     var includeGroup = [];  
  212.     if (index == this.data.firstIndex && !unselectStatus) { // 如果是第一个选中的属性值，则该属性所有值可选  
  213.       var commodityAttr = this.data.commodityAttr;  
  214.       // 其他选中的属性值全都置空  
  215.       // console.log('其他选中的属性值全都置空', index, this.data.firstIndex, !unselectStatus);  
  216.       for (var i = 0; i < attrValueList.length; i++) {  
  217.         for (var j = 0; j < attrValueList[i].attrValues.length; j++) {  
  218.           attrValueList[i].selectedValue = '';  
  219.         }  
  220.       }  
  221.     } else {  
  222.       var commodityAttr = this.data.includeGroup;  
  223.     }  
  224.   
  225.     // console.log('选中', commodityAttr, index, key, value);  
  226.     for (var i = 0; i < commodityAttr.length; i++) {  
  227.       for (var j = 0; j < commodityAttr[i].attrValueList.length; j++) {  
  228.         if (commodityAttr[i].attrValueList[j].attrKey == key && commodityAttr[i].attrValueList[j].attrValue == value) {  
  229.           includeGroup.push(commodityAttr[i]);  
  230.         }  
  231.       }  
  232.     }  
  233.     attrValueList[index].selectedValue = value;  
  234.   
  235.     // 判断属性是否可选  
  236.     for (var i = 0; i < attrValueList.length; i++) {  
  237.       for (var j = 0; j < attrValueList[i].attrValues.length; j++) {  
  238.         attrValueList[i].attrValueStatus[j] = false;  
  239.       }  
  240.     }  
  241.     for (var k = 0; k < attrValueList.length; k++) {  
  242.       for (var i = 0; i < includeGroup.length; i++) {  
  243.         for (var j = 0; j < includeGroup[i].attrValueList.length; j++) {  
  244.           if (attrValueList[k].attrKey == includeGroup[i].attrValueList[j].attrKey) {  
  245.             for (var m = 0; m < attrValueList[k].attrValues.length; m++) {  
  246.               if (attrValueList[k].attrValues[m] == includeGroup[i].attrValueList[j].attrValue) {  
  247.                 attrValueList[k].attrValueStatus[m] = true;  
  248.               }  
  249.             }  
  250.           }  
  251.         }  
  252.       }  
  253.     }  
  254.     // console.log('结果', attrValueList);  
  255.     this.setData({  
  256.       attrValueList: attrValueList,  
  257.       includeGroup: includeGroup  
  258.     });  
  259.   
  260.     var count = 0;  
  261.     for (var i = 0; i < attrValueList.length; i++) {  
  262.       for (var j = 0; j < attrValueList[i].attrValues.length; j++) {  
  263.         if (attrValueList[i].selectedValue) {  
  264.           count++;  
  265.           break;  
  266.         }  
  267.       }  
  268.     }  
  269.     if (count < 2) {// 第一次选中，同属性的值都可选  
  270.       this.setData({  
  271.         firstIndex: index  
  272.       });  
  273.     } else {  
  274.       this.setData({  
  275.         firstIndex: -1  
  276.       });  
  277.     }  
  278.   },  
  279.   /* 取消选中 */  
  280.   disSelectValue: function (attrValueList, index, key, value) {  
  281.     var commodityAttr = this.data.commodityAttr;  
  282.     attrValueList[index].selectedValue = '';  
  283.   
  284.     // 判断属性是否可选  
  285.     for (var i = 0; i < attrValueList.length; i++) {  
  286.       for (var j = 0; j < attrValueList[i].attrValues.length; j++) {  
  287.         attrValueList[i].attrValueStatus[j] = true;  
  288.       }  
  289.     }  
  290.     this.setData({  
  291.       includeGroup: commodityAttr,  
  292.       attrValueList: attrValueList  
  293.     });  
  294.   
  295.     for (var i = 0; i < attrValueList.length; i++) {  
  296.       if (attrValueList[i].selectedValue) {  
  297.         this.selectValue(attrValueList, i, attrValueList[i].attrKey, attrValueList[i].selectedValue, true);  
  298.       }  
  299.     }  
  300.   },  
  301.   /* 点击确定 */  
  302.   submit: function () {  
  303.     var value = [];  
  304.     for (var i = 0; i < this.data.attrValueList.length; i++) {  
  305.       if (!this.data.attrValueList[i].selectedValue) {  
  306.         break;  
  307.       }  
  308.       value.push(this.data.attrValueList[i].selectedValue);  
  309.     }  
  310.     if (i < this.data.attrValueList.length) {  
  311.       wx.showToast({  
  312.         title: '请完善属性',  
  313.         icon: 'loading',  
  314.         duration: 1000  
  315.       })  
  316.     } else {  
  317.       wx.showToast({  
  318.         title: '选择的属性：' + value.join('-'),  
  319.         icon: 'sucess',  
  320.         duration: 1000  
  321.       })  
  322.     }  
  323.   }  
  324. })  


运行效果：

微信小程序实战商城系列《四》商品属性分类(图3)






免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有