微信小程序开发好了_微信小程序完成商品属性联动选择

  • 栏目:行业动态 时间:2021-01-08 10:02 分享新闻到:
<返回列表

微信小程序实现商品属性联动选择       这篇文章主要为大家详细介绍了微信小程序实现商品属性联动选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

效果演示:

代码示例

 !-- view 属性值联动选择 /view -- 
 !--options-- 
 view 
 !--每组属性-- 
 view wx:for="{{attrValueList}}" wx:for-item="attrValueObj" wx:for-index="attrIndex" 
 !--属性名-- 
 view {{attrValueObj.attrKey}} /view 
 !--属性值-- 
 view 
 !--每个属性值-- 
 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 
 button bindtap="submit" 选好了 /button 
 /view 
commodity_attr_list:循环获取商品的属性名和相对应的属性值,并布局页面。
weui-btn-area:提交校验并获取选中商品属性结果。

数据结构

//数据结构:以一组一组的数据来进行设定 
 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: modityAttr
 this.distachAttrValue(modityAttr);
 // 只有一个属性组合的时候默认选中 
 // console.log(this.data.attrValueList); 
 if (modityAttr.length == 1) {
 for (var i = 0; i modityAttr[0].attrValueList.length; i++) {
 this.data.attrValueList[i].selectedValue = modityAttr[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 = modityAttr[i].attrValueList[j].attrKey, attrValueList);
 // console.log('属性索引', attrIndex); 
 // 如果还没有属性索引为-1,此时新增属性并设置属性值数组的第一个值;索引大于等于0,表示已存在的属性名的位置 
 if (attrIndex = 0) {
 // 如果属性值数组中没有该值,push新值;否则不处理 
 if (!modityAttr[i].attrValueList[j].attrValue, attrValueList[attrIndex].attrValues)) {
 attrValueList[attrIndex].modityAttr[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) { // 如果是第一个选中的属性值,则该属性所有值可选 
 modityAttr = modityAttr;
 // 其他选中的属性值全都置空 
 // 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 {
 modityAttr = 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 == modityAttr[i].attrValueList[j].attrValue == value) {
 modityAttr[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) {
 modityAttr = modityAttr;
 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);
 }
.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.em 15px 0.3em; 
.weui-btn{
 width: 80%;
 height: 100rpx;
 border-radius: 3rpx; 
 background-color:#0089dc; 
 color: #fff; 
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


分享新闻到:

更多阅读

协会商会网站模版-天津网站制作

行业动态 2021-01-13
【鹊起高新科技_先提升后付_手机微信:179900】十多年技术专业天津市网站制作制作提升企业...
查看全文

广州凡科互联网科技股份有限公司招聘媒

行业动态 2021-01-12
招聘人数:20职位信息岗位职责:1、根据日常内部需求及时寻找合适媒体,和媒体及各中介公...
查看全文

微信活动报名小程序_jquery完成自习气ba

行业动态 2021-01-12
jquery完成响应式banner聚焦点图 文中关键共享了jquery完成响应式banner聚焦点图的实例编码...
查看全文
返回全部新闻


区域站点: 南丰县微信小程序开发教程   南宫市小程序开发模板   囊谦县微信小程序开发者工具   南和县签到小程序   南华县微信小程序开发教程   南江县小程序开发模板   南京市微信小程序开发者工具   南靖县签到小程序   南康市微信小程序开发教程   南乐县小程序开发模板   南陵县微信小程序开发者工具   南宁市签到小程序   南平市微信小程序开发教程   南皮县小程序开发模板   南市区微信小程序开发者工具   南通市签到小程序   南投县微信小程序开发教程   南雄市小程序开发模板   南溪县微信小程序开发者工具   南阳市签到小程序   南漳县微信小程序开发教程   南召县小程序开发模板   南郑县微信小程序开发者工具   那坡县签到小程序   那曲县微信小程序开发教程   纳雍县小程序开发模板   讷河市微信小程序开发者工具   内黄县签到小程序   内江市微信小程序开发教程   内丘县小程序开发模板   内乡县微信小程序开发者工具   嫩江市签到小程序   聂荣县微信小程序开发教程   尼玛县小程序开发模板   尼木县微信小程序开发者工具   宁安市签到小程序   宁波市微信小程序开发教程   宁城县小程序开发模板   宁德市微信小程序开发者工具   宁都县签到小程序   宁国市微信小程序开发教程   宁海县小程序开发模板   宁化县微信小程序开发者工具   宁晋县签到小程序   宁陵县微信小程序开发教程   宁明县小程序开发模板   宁南县微信小程序开发者工具   宁强县签到小程序   宁陕县微信小程序开发教程   宁武县小程序开发模板   宁乡市微信小程序开发者工具   宁阳县签到小程序   宁远县微信小程序开发教程   农安县小程序开发模板   磐安县微信小程序开发者工具   盘锦市签到小程序   盘山县微信小程序开发教程   磐石市小程序开发模板   盘州市微信小程序开发者工具   蓬安县签到小程序   澎湖县微信小程序开发教程   蓬莱市小程序开发模板   彭山县微信小程序开发者工具   蓬溪县签到小程序   彭阳县微信小程序开发教程   彭泽县小程序开发模板   彭州市微信小程序开发者工具   偏关县签到小程序   平安县微信小程序开发教程   平昌县小程序开发模板   平定县微信小程序开发者工具   屏东县签到小程序   平度市微信小程序开发教程   平果县小程序开发模板   平和县微信小程序开发者工具   平湖市签到小程序   平江县微信小程序开发教程   平乐县小程序开发模板   平凉市微信小程序开发者工具   平利县签到小程序   平罗县微信小程序开发教程   平陆县小程序开发模板   屏南县微信小程序开发者工具   平泉市签到小程序   屏山县微信小程序开发教程   平顺县小程序开发模板   平塘县微信小程序开发者工具   平潭县签到小程序   平武县微信小程序开发教程   萍乡市小程序开发模板   平乡县微信小程序开发者工具   平阳县签到小程序   平遥县微信小程序开发教程   平阴县小程序开发模板   平邑县微信小程序开发者工具   平远县签到小程序   平舆县微信小程序开发教程   皮山县小程序开发模板   普安县微信小程序开发者工具   浦北县签到小程序   浦城县微信小程序开发教程   普洱市小程序开发模板   普格县微信小程序开发者工具   浦江县签到小程序   普兰县微信小程序开发教程   普宁市小程序开发模板   莆田市微信小程序开发者工具   迁安市签到小程序   乾安县微信小程序开发教程   潜江市小程序开发模板   潜山市微信小程序开发者工具  

友情链接: 微信开发小程序步 微信小程序页面制 微信小程序快捷开 小程序开发教程 手机版

Copyright © 2002-2020 微信小程序开发者工具_签到小程序_微信小程序开发教程_小程序开发模板_留言小程序 版权所有 (网站地图) 备案号:粤ICP备10235580号