微信小程序之商品属性分类-——-微信小程序实战商城系列（4）

最新推荐文章于 2024-08-30 14:19:44 发布

2301_79056696

最新推荐文章于 2024-08-30 14:19:44 发布

阅读量774

点赞数 30

分类专栏：程序员文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/2301_79056696/article/details/138006203

版权

本文介绍了微信小程序中商品属性的分类管理，包括型号、颜色、大小和尺寸等属性，通过实例展示了如何处理和组织商品的不同属性组合，以便用户进行选择。内容涉及数据结构与属性值的组合、状态管理和用户交互逻辑。

摘要由CSDN通过智能技术生成

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’]
}
/
// 把数据对象的数据&#x