首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

微信小程序实现商品属性联动选择

Posted in Javascript onFebruary 15, 2019

本文实例为大家分享了微信小程序实现商品属性联动选择的具体代码，供大家参考，具体内容如下

效果演示：

微信小程序实现商品属性联动选择

代码示例

1、commodity.xml

<!-- <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-code="{{attrCode}}" 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" bindtap="submit">选好了    </button> 
</view>

上述代码把页面盒子分为两部分commodity_attr_list和weui-btn-area。
commodity_attr_list：循环获取商品的属性名和相对应的属性值，并布局页面。
weui-btn-area：提交校验并获取选中商品属性结果。

2、commodity.js

数据结构

//数据结构：以一组一组的数据来进行设定 
  commodityAttr: [
   {
    priceId: 1,
    price: 35.0,
    "stock": 8,
    "attrValueList": [
     {
      "attrKey": "规格：",
      "attrValue": "+免费配料",
      "attrCode": "1001"
     },
     {
      "attrKey": "甜度：",
      "attrValue": "七分甜",
      "attrCode": "2001"
     },
     {
      "attrKey": "加料：",
      "attrValue": "珍珠",
      "attrCode": "3001"
     },
     {
      "attrKey": "冰块：",
      "attrValue": "少冰",
      "attrCode": "4001"
     }
    ]
   },
   {
    priceId: 2,
    price: 35.1,
    "stock": 9,
    "attrValueList": [
     {
      "attrKey": "规格：",
      "attrValue": "+燕麦",
      "attrCode": "1002"
     },
     {
      "attrKey": "甜度：",
      "attrValue": "五分甜",
      "attrCode": "2002"
     },
     {
      "attrKey": "加料：",
      "attrValue": "椰果",
      "attrCode": "3002"
     },
     {
      "attrKey": "冰块：",
      "attrValue": "去冰",
      "attrCode": "4002"
     }
    ]
   },
   {
    priceId: 3,
    price: 35.2,
    "stock": 10,
    "attrValueList": [
     {
      "attrKey": "规格：",
      "attrValue": "+布丁",
      "attrCode": "1003"
     },
     {
      "attrKey": "甜度：",
      "attrValue": "无糖",
      "attrCode": "2003"
     },
     {
      "attrKey": "加料：",
      "attrValue": "仙草",
      "attrCode": "3003"
     },
     {
      "attrKey": "冰块：",
      "attrValue": "常温",
      "attrCode": "4003"
     }
    ]
   },
   {
    priceId: 4,
    price: 35.2,
    "stock": 10,
    "attrValueList": [
     {
      "attrKey": "规格：",
      "attrValue": "再加一份奶霜",
      "attrCode": "1004"
     },
     {
      "attrKey": "甜度：",
      "attrValue": "无糖",
      "attrCode": "2003"
     },
     {
      "attrKey": "加料：",
      "attrValue": "仙草",
      "attrCode": "3004"
     },
     {
      "attrKey": "冰块：",
      "attrValue": "热饮",
      "attrCode": "4004"
     }
    ]
   },
   {
    priceId: 5,
    price: 35.2,
    "stock": 10,
    "attrValueList": [
     {
      "attrKey": "规格：",
      "attrValue": "+免费配料",
      "attrCode": "1004"
     },
     {
      "attrKey": "甜度：",
      "attrValue": "五分甜",
      "attrCode": "2003"
     },
     {
      "attrKey": "加料：",
      "attrValue": "椰果",
      "attrCode": "3004"
     },
     {
      "attrKey": "冰块：",
      "attrValue": "常温",
      "attrCode": "4004"
     }
    ]
   }
  ],
  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 {
   var valueStr = "";
   for(var i = 0;i < value.length;i++){
    console.log(value[i]);
    valueStr += value[i]+",";
   }
   wx.showModal({
    title: '提示',
    content: valueStr,
    success: function (res) {
     if (res.confirm) {
      console.log('用户点击确定')
     } else if (res.cancel) {
      console.log('用户点击取消')
     }
    }
   }) 
   console.log(valueStr);
  }
 }

3、commodity.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; 
 display: flex;
 flex-direction: column;
} 
/*属性名*/
.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 30rpx; 
 margin: 10rpx 10rpx; 
 border: 1rpx solid #ececec; 
 border-radius:5px;
 line-height:30px;
} 
/*每个属性选中的当前样式*/
.attr_value_active { 
 border-radius: 10rpx; 
 color: #0089dc; 
 padding: 0 30rpx; 
 border: 1rpx solid #0089dc; 
 /* background: #fff;  */
} 
/*禁用属性*/
.attr_value_disabled { 
 color: #ccc; 
} 
 
/*button*/
.weui-btn-area { 
 margin: 1.17647059em 15px 0.3em; 
} 
.weui-btn{
 width: 80%;
 height: 100rpx;
 border-radius: 3rpx; 
 background-color:#0089dc; 
 color: #fff; 
}

好了，复制上述代码就可以实现效果哦，赶紧试试吧！

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

微信小程序实现商品属性联动选择

- Author -

不川类库

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
深入理解Promise.all
Aug 08 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
微信小程序实现购物页面左右联动
Feb 15 #Javascript
微信小程序基于picker实现级联菜单
Feb 15 #Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 #Javascript
详解react-refetch的使用小例子
Feb 15 #Javascript
小程序实现多列选择器
Feb 15 #Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 #jQuery
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 #Javascript
矿石收音机(1) DSP(2) 修复(2) 海燕B411(1) 电子管(5) TECSUN(1) 放大器(1) 接收机(2) 车机(1) 德生(17)
You might like
一些关于PHP的知识
2006/11/17 PHP
php的一个登录的类 [推荐]
2007/03/16 PHP
php 多个submit提交表单 处理方法
2009/07/07 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
jQuery结合Json提交数据到Webservice，并接收从Webservice返回的Json数据
2011/02/18 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Python 文件操作之读取文件(read)，文件指针与写入文件(write)，文件打开方式示例
2019/09/29 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
HTML5资源预加载(Link prefetch)详细介绍（给你的网页加速）
2014/05/07 HTML / CSS
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装：Rivers
2019/04/23 全球购物
档案工作个人总结
2015/03/03 职场文书
运动会1000米加油稿
2015/07/21 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
七年级作文之我的梦想
2019/10/16 职场文书