微信小程序实战篇：商品属性联动选择（案例）

本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果，素材参考了一点点奶茶。

效果演示：

商品属性联动.gif

代码示例

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

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



作者：IT实战联盟Lin
链接：https://www.jianshu.com/p/f7f5f593b8e3
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

更多专业前端知识，请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/364755.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用Mockito在Java中进行模拟入门

使用Mockito在Java中进行模拟入门

我们都编写了单元测试&#xff0c;但是有时我们面临的挑战是被测单元可能依赖于其他组件。 并且配置其他组件进行单元测试绝对是一个过大的选择。 相反&#xff0c;我们可以使用Mocks代替其他组件&#xff0c;并继续进行单元测试。 为了说明如何使用模拟&#xff0c;我有一个数…
阅读更多...
2.12 Hivet中order by，sort by、distribute by和cluster by

2.12 Hivet中order by，sort by、distribute by和cluster by

https://cwiki.apache.org/confluence/display/Hive/LanguageManualSortBy一、order by对全局数据的排序&#xff0c;仅仅只有一个reduce&#xff1b;Hive中的order by跟传统的sql语言中的order by作用是一样的&#xff0c;会对查询的结果做一次全局排序&#xff0c; 所以说&am…
阅读更多...
如何相互转换逗号分隔的字符串和List【转】

如何相互转换逗号分隔的字符串和List【转】

将逗号分隔的字符串转换为List 方法 1&#xff1a; 利用JDK的Arrays类 String str "a,b,c"; List<String> result Arrays.asList(str.split(",")); 方法 2&#xff1a; 利用Guava的Splitter String str "a, b, c"; List<String&g…
阅读更多...
禁用F12和鼠标右键，防止查看控制台代码

禁用F12和鼠标右键，防止查看控制台代码

虽然是个治标不治本的办法&#xff0c;还是挺有用的 在禁用同时&#xff0c;自身的代码健壮性也需要加强 // 屏蔽F12document.onkeydown function () {//f12键if (window.event && window.event.keyCode 123) {event.keyCode 0;event.returnValue false;}// enter…
阅读更多...
java 文件解析异常_java中异常的解析

java 文件解析异常_java中异常的解析

Java Exception&#xff1a;1、Error2、Runtime Exception 运行时异常3、Exception4、throw 用户自定义异常异常类分两大类型&#xff1a;Error类代表了编译和系统的错误&#xff0c;不允许捕获&#xff1b;Exception类代表了标准Java库方法所激发的异常。Exception类还包含运行…
阅读更多...
Spring JMS：处理事务中的消息

Spring JMS：处理事务中的消息

1.引言 这篇文章将向您展示在使用JMS异步接收消息期间&#xff0c;使用者执行过程中的错误如何导致消息丢失。 然后&#xff0c;我将解释如何使用本地事务解决此问题。 您还将看到这种解决方案在某些情况下可能导致消息重复&#xff08;例如&#xff0c;当它将消息保存到数据库…
阅读更多...
OS X EI Captain 下解决 There was a problem confirming the ssl certificate 问题

OS X EI Captain 下解决 There was a problem confirming the ssl certificate 问题

参考&#xff1a; Problem Confirming the SSL Certificate - OSX OS X EI Captain 下解决 There was a problem confirming the ssl certificate 问题 在安装 matplotlib 时&#xff0c;出现以下错误&#xff1a; python3 -mpip install matplotlibCollecting matplotlibCould…
阅读更多...
Linux下Python编译安装

Linux下Python编译安装

1.安装python3 1.1下载python源码包 网址&#xff1a;https://www.python.org/downloads/release/python-362/ 下载地址&#xff1a;https://www.python.org/ftp/python/3.6.2/Python-3.6.2.tgz 1.1.1安装python前的库环境&#xff0c;非常重要 yum install gcc patch libffi-d…
阅读更多...
call/apply以及this指向的理解

call/apply以及this指向的理解

javascript是面向对象的语言&#xff0c;Function也是一种对象&#xff0c;有自己的属性和方法。call和apply就是js函数自带方法&#xff0c;挂在Fucntion.prototype上。一般调用某函数时&#xff0c;直接“函数名&#xff08;参数&#xff09;”的写法即可&#xff0c;函数内部…
阅读更多...
Java排序算快速排序_Java排序算法 [快速排序]

Java排序算快速排序_Java排序算法 [快速排序]

package cn.com.dom4j.sort;public class QuickSort {/**快速排序在 Java中, 快速排序被用作基本数据类型的排序 (当然, 不只快速排序一种)快速排序是实践中的一种快速的排序算法, 在 C或对 Java基本类型的排序证特别有用.它的平均运行时间是 O(N logN), 该算法之所以特别快, 主…
阅读更多...
Java Enterprise软件与应有的内容

Java Enterprise软件与应有的内容

许多开发人员在其职业生涯的某个阶段最终进入了Java“企业”世界。 我知道&#xff0c;仅此一个词就能引起各种反应&#xff0c;这是正确的。 通常&#xff0c;存在许多有趣的技术挑战的环境最终会成为那些没人愿意从事的环境&#xff0c;因为它们脆弱&#xff0c;难以处理且没…
阅读更多...
OO第二单元作业总结

OO第二单元作业总结

一&#xff1a;设计策略 第一次作业&#xff1a;第一次是单电梯傻瓜调度策略&#xff0c;因此我把调度器当作共享资源对象&#xff0c;有一个put和一个get方法&#xff0c;因为只有一个电梯&#xff0c;并且单次取出和投放一个请求&#xff0c;因此只需要同步控制一下这两个方法…
阅读更多...
LESS+to+MCSS

LESS+to+MCSS

此文已由作者郑海波授权网易云社区发布。欢迎访问网易云社区&#xff0c;了解更多网易技术产品运营经验一、前言虽然首页没有开始做&#xff0c;昨天仍决定将[MCSS](https://github.com/NetEaseWD/mcss)从身边的基友们开始向杭研推广了&#xff0c;从开始做这个直到现在推广遇到…
阅读更多...
jmeter找不到java.dll_Windows下Jmeter安装出现Not able to find Java executable or version问题解决方案...

jmeter找不到java.dll_Windows下Jmeter安装出现Not able to find Java executable or version问题解决方案...

最近在做一个开放接口平台性能测试 , 指标是最少达到1000/s的并发 , 接口鉴权 百万级的表 在1s内完成..在众多压测工具中 ,,选择了Apache的jmeter ,于官网下载了最新版本http://jmeter.apache.org/download_jmeter.cgi (jmeter下载地址)由于jmeter运行是基于java的,所以需要…
阅读更多...
localStorage/cookie 用法分析与简单封装

localStorage/cookie 用法分析与简单封装

本地存储是HTML5中提出来的概念&#xff0c;分localStorage和sessionStorage。通过本地存储&#xff0c;web应用程序能够在用户浏览器中对数据进行本地的存储。与 cookie 不同&#xff0c;存储限制要大得多&#xff08;至少5MB&#xff09;&#xff0c;并且信息不会被传输到服务…
阅读更多...
使用Lucene的搜索服务器搜索Jira问题

使用Lucene的搜索服务器搜索Jira问题

您可能还记得我的第一篇博客文章&#xff0c;其中描述了Lucene开发人员如何使用Lucene搜索应用程序查找我们的Jira问题来食用我们自己的狗食。 该应用程序已成为许多Lucene现代功能的强大展示&#xff0c;例如侧向钻取和动态范围刻面&#xff0c; 基于中缀匹配的新建议 &#…
阅读更多...
迭代加深搜索 C++解题报告 ：[SCOI2005]骑士精神

迭代加深搜索 C++解题报告 ：[SCOI2005]骑士精神

题目 此题根据题目可知是迭代加深搜索。 首先应该枚举空格的位置&#xff0c;让空格像一个马一样移动。 但迭代加深搜索之后时间复杂度还是非常的高&#xff0c;根本过不了题。 感觉也想不出什么减枝&#xff0c;于是便要用到了乐观估计函数&#xff08;Optimistic Estimation …
阅读更多...
一个web项目web.xml的配置中context-param配置作用

一个web项目web.xml的配置中context-param配置作用

<context-param>的作用:web.xml的配置中<context-param>配置作用1. 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点: <listener></listener> 和 <context-param></context-param>2.紧接着,容器创建一个Servl…
阅读更多...
JavA持有类_关于继承：Java持有对象的超类的类型

JavA持有类_关于继承：Java持有对象的超类的类型

本问题已经有最佳答案&#xff0c;请猛点这里访问。我有两个类动物和狗。因为你可以从动物身上延伸出来。我可以毫无问题地编写这些类&#xff0c;但我注意到我可以像这样创建一个新的dog对象&#xff1a;Dog firstDog new Dog("rocky");没关系&#xff0c;但是当我…
阅读更多...
CSS3 选择器用法小结

CSS3 选择器用法小结

表单选择器&#xff1a; /*:enabled 可用的 :disabled 被禁用的 :focus 获取了焦点的 多用在表单元素上*/ input:enabled {...} input:disabled {...} input:focus {...} 属性选择器&#xff1a; /*[attribute] [attributevalue] 选择具有对应属性的元素 即使此属性没有实际作…
阅读更多...
最新文章

Copyright @ 2022~2023