微信小程序商城项目之商品属性分类（4）

网络编程 2025/1/12 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

续上一篇的文章：微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）
所提及的购物数量的加减，现在说说商品属性值联动选择。

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

现在就为大家介绍这个小组件，在小程序中，该如何去写
下图为本项目的图：

wxml：

<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]" bindtap="selectAttrValue" data-status="{{attrValueObj.attrValueStatus[valueIndex]}}" 
 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> 
 </view> 
 </view> 
</view> 
<!--button--> 
<view class="weui-btn-area"> 
 <button class="weui-btn" type="primary" bindtap="submit">确定</button> 
</view>

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; 
} 
/*属性名*/ 
.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 10rpx; 
 margin: 0 10rpx; 
 border: 1rpx solid #ececec; 
} 
/*每个属性选中的当前样式*/ 
.attr_value_active { 
 background: #FFCC00; 
 border-radius: 10rpx; 
 color: #fff; 
 padding: 0 10rpx; 
} 
/*禁用属性*/ 
.attr_value_disabled { 
 color: #ccc; 
} 
 
/*button*/ 
.btn-area { 
 margin: 1.17647059em 15px 0.3em; 
} 
 
.btn { 
 margin-top: 15px; 
 background-color:#FFCC00; 
 color: #fff; 
} 
.btn:first-child { 
 margin-top: 0; 
}

js：

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

Page({ 
 data: { 
 firstIndex: -1, 
 //准备数据 
 //数据结构：以一组一组来进行设定 
 commodityAttr: [ 
 { 
 priceId: 1, 
 price: 35.0, 
 "stock": 8, 
 "attrValueList": [ 
 { 
 "attrKey": "型号", 
 "attrValue": "2" 
 }, 
 { 
 "attrKey": "颜色", 
 "attrValue": "白色" 
 }, 
 { 
 "attrKey": "大小", 
 "attrValue": "小" 
 }, 
 { 
 "attrKey": "尺寸", 
 "attrValue": "S" 
 } 
 ] 
 }, 
 { 
 priceId: 2, 
 price: 35.1, 
 "stock": 9, 
 "attrValueList": [ 
 { 
 "attrKey": "型号", 
 "attrValue": "1" 
 }, 
 { 
 "attrKey": "颜色", 
 "attrValue": "黑色" 
 }, 
 { 
 "attrKey": "大小", 
 "attrValue": "小" 
 }, 
 { 
 "attrKey": "尺寸", 
 "attrValue": "M" 
 } 
 ] 
 }, 
 { 
 priceId: 3, 
 price: 35.2, 
 "stock": 10, 
 "attrValueList": [ 
 { 
 "attrKey": "型号", 
 "attrValue": "1" 
 }, 
 { 
 "attrKey": "颜色", 
 "attrValue": "绿色" 
 }, 
 { 
 "attrKey": "大小", 
 "attrValue": "大" 
 }, 
 { 
 "attrKey": "尺寸", 
 "attrValue": "L" 
 } 
 ] 
 }, 
 { 
 priceId: 4, 
 price: 35.2, 
 "stock": 10, 
 "attrValueList": [ 
 { 
 "attrKey": "型号", 
 "attrValue": "1" 
 }, 
 { 
 "attrKey": "颜色", 
 "attrValue": "绿色" 
 }, 
 { 
 "attrKey": "大小", 
 "attrValue": "大" 
 }, 
 { 
 "attrKey": "尺寸", 
 "attrValue": "L" 
 } 
 ] 
 } 
 ], 
 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 "text-align: center">
demo地址：微信小程序商城项目之商品属性值联动选择
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

微信小程序,商城,商品属性分类

标签：

微信小程序,商城,商品属性分类

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“微信小程序商城项目之商品属性分类（4）”

暂无微信小程序商城项目之商品属性分类（4）的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月12日

微信小程序商城项目之商品属性分类（4）

微信小程序,商城,商品属性分类

微信小程序商城项目之购物数量加减（3）

微信小程序商城项目之侧栏分类效果（1）

评论“微信小程序商城项目之商品属性分类（4）”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接