js
Page({
data: {
simulatedDATA: {
difference: [{
id: "19",
price: "200.00",
stock: "19",
difference: "红色,x"
}, {
id: "20",
price: "300.00",
stock: "29",
difference: "白色,x"
}, {
id: "21",
price: "300.00",
stock: "10",
difference: "黑色,x"
}, {
id: "21",
price: "300.00",
stock: "10",
difference: "黑色,xl"
}, {
id: "24",
price: "500.00",
stock: "10",
difference: "白色,xl"
}],
specifications: [{
name: "颜色",
item: [{
name: "白色"
}, {
name: "黑色"
}, {
name: "红色"
}]
}, {
name: "尺码",
item: [{
name: "x"
}, {
name: "xl"
}]
}]
},
selectArr: [], //存放被选中的值
shopItemInfo: {}, //存放要和选中的值进行匹配的数据
subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
content: "",
specifications: '',
boxArr: {},
},
onLoad() {
var self = this
var simulatedDATA = self.data.simulatedDATA
var difference = self.data.simulatedDATA.difference
var shopItemInfo = self.data.shopItemInfo
var specifications = self.data.simulatedDATA.specifications
console.log(simulatedDATA)
console.log(difference)
console.log(shopItemInfo)
console.log(specifications)
for (var i in difference) {
shopItemInfo[difference[i].difference] = difference[i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
}
for (var i = 0; i < specifications.length; i++) {
for (var o = 0; o < specifications[i].item.length; o++) {
console.log(specifications[i].item[o])
specifications[i].item[o].isShow = true
}
}
simulatedDATA.specifications = specifications
self.setData({
simulatedDATA: simulatedDATA,
shopItemInfo: shopItemInfo,
specifications: specifications
})
},
onShow() { },
specificationBtn(e) {
console.log(e)
var n = e.currentTarget.dataset.n
var index = e.currentTarget.dataset.index
var item = e.currentTarget.dataset.name
var self = this;
var selectArr = self.data.selectArr
var subIndex = self.data.subIndex
var boxArr = self.data.boxArr
var shopItemInfo = self.data.shopItemInfo
console.log(n)
console.log(index)
console.log(item)
console.log(selectArr)
console.log(subIndex)
console.log(boxArr)
console.log(shopItemInfo)
if (selectArr[n] != item) {
selectArr[n] = item;
subIndex[n] = index;
} else {
// self.selectArr[n] = "";
// self.subIndex[n] = -1;
//去掉选中的颜色
}
self.checkItem();
var arr = shopItemInfo[selectArr];
console.log(selectArr)
// if (arr) {
// boxArr.id = arr.id;
// boxArr.price = arr.price;
// }
self.setData({
selectArr: selectArr,
subIndex: subIndex,
// boxArr: boxArr,
shopItemInfo: shopItemInfo
})
// console.log(boxArr)
},
checkItem() {
var self = this;
var simulatedDATA = self.data.simulatedDATA
var option = self.data.simulatedDATA.specifications;
var result = []; //定义数组存储被选中的值
console.log(simulatedDATA, option)
for (var i in option) {
result[i] = self.data.selectArr[i] ? self.data.selectArr[i] : "";
console.log(self.data.selectArr[i])
}
for (var i in option) {
var last = result[i]; //把选中的值存放到字符串last去
for (var k in option[i].item) {
result[i] = option[i].item[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
option[i].item[k].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
console.log(option[i].item[k].isShow)
}
result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
}
simulatedDATA.specifications = option
self.setData({
simulatedDATA: simulatedDATA
})
},
isMay(result) {
for (var i in result) {
if (result[i] == "") {
return true; //如果数组里有为空的值，那直接返回true
}
}
return !this.data.shopItemInfo[result] ? false : this.data.shopItemInfo[result].stock == 0 ? false : true; //匹配选中的数据的库存，若不为空返回true反之返回false
},
})wxml
<view id="vmsimulatedDATA">
<view class='productConten'>
<view class="productDelcom" wx:for="{{simulatedDATA.specifications}}" wx:for-index='n' wx:for-item="ProductItem">
<view class='p'>{{ProductItem.name}}</view>
<ul class="productFooterlist clearfix">
<li wx:for="{{ProductItem.item}}" wx:for-item="oItem" bindtap="specBtn" data-show="{{oItem.isShowsel}}" class="{{oItem.isShowsel?'':'noneActive'}} {{subIndex[n] == index?'productActive':''}}" data-ol="{{subIndex[n]}}" data-name="{{oItem.name}}" data-n="{{n}}"
data-index="{{index}}">{{oItem.name}}</li> </ul>
</view>
</view>
</view>wxss
#vmsimulatedDATA {
background: #fff;
}
#vmsimulatedDATA .clearfix:after {
display: block;overflow: hidden;clear: both;height: 0;visibility: hidden;content: "";}
#vmsimulatedDATA .productConten {margin-bottom: 10px;}#vmsimulatedDATA .productDelcom {padding: 5px 20px;color: #000;font-size: 12px;}
#vmsimulatedDATA .productDelcom .p {padding: 10px 0;font-size: 14px;}
#vmsimulatedDATA .productFooterlist li {border: 1px solid #f4f4f4;border-radius: 2px;color: #333333;text-align: center;float: left;min-width: 30px;margin-right: 5px;padding: 2px 5px;margin-bottom: 5px;}
#vmsimulatedDATA .productFooterlist li.productActive {background-color: #c41e3a;color: #fff;border: 1px solid #c41e3a;}
#vmsimulatedDATA .productFooterlist li.noneActive {background-color: #ccc;color: #000;pointer-events: none;
}
在网上查的方法，不懂的可以看原网页：
https://www.jianshu.com/p/5f48fd655342