首页
所有分类
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 相关文章推荐
jQuery控制图片的hover效果（smartRollover.js）
Mar 18 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
javascript的函数作用域
Nov 12 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
jquery中键盘事件小结
Feb 24 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
微信小程序实现购物页面左右联动
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) PIL(1) 信号同步(1) Flask(2) reduce()(1) 鲲鹏(1) 裁剪图片(1) 生命周期(1) Python(3) 死锁(3)
You might like
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
PHP输入流php://input介绍
2012/09/18 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
php类自动加载器实现方法
2015/07/28 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
python开发之str.format()用法实例分析
2016/02/22 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python nmap实现端口扫描器教程
2020/05/28 Python
wxPython实现绘图小例子
2019/11/19 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
美特斯邦威官方商城：邦购网
2016/10/13 全球购物
物流管理应届生求职信
2013/11/07 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
父母对孩子说的话
2014/04/12 职场文书
小学优秀教师材料
2014/12/15 职场文书
2015年班组工作总结
2015/04/20 职场文书
导游词之桂林山水
2019/09/20 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android