本文共 2965 字，大约阅读时间需要 9 分钟。

实现商品颜色和尺码反选的大致思路：

2.调用商品详情接口的时候需要传递SKU数组（存放有颜色和尺码的数组集合），sizeVOList数组（存放商品所有的尺码集合），skcVOList（存放商品所有的颜色集合）。

3.用户点击颜色，将尺码中的status状态首先设置为false,这步操作是为什么后面显示是否有货。尺码一致~

具体代码

/**    * 点击尺寸 颜色改变样式    */  changeSize: function (e) {    var nowSize, chooses = e.currentTarget.dataset.chooses;    if (e.currentTarget.dataset.disc) return    if (this.data.nowSize == chooses) {      nowSize = "";      var skcVOList = this.data.skcVOList;      skcVOList.forEach(item => item.status = false)      this.setData({ skcVOList })    } else {      nowSize = chooses    }    this.setData({      nowSize: nowSize    })    this.distachAttrResult(this.data.nowColor + this.data.nowSize);  },   /**    * 点击尺寸 颜色改变样式    */   changeColor: function (e) {    let productId = e.currentTarget.dataset.productcode;    var nowColor, choosec = e.currentTarget.dataset.choosec;    if (e.currentTarget.dataset.disc) return    if (this.data.nowColor == choosec) {      nowColor = ""      var sizeVOList=this.data.sizeVOList;      sizeVOList.forEach(item => item.status = false);      this.setData({sizeVOList})    } else {      nowColor = choosec      // 颜色选中后图片发生改变      this.changeColorImg(e.currentTarget.dataset.color);    }    this.setData({      nowColor: nowColor,      productCode: productId    })    this.distachAttrResult(this.data.nowColor + this.data.nowSize);  },

组合可选

//组合可选  distachAttrResult: function (res) {    var skuVOList = this.data.skuVOList;    if (this.data.nowColor) {      //通过颜色选尺码      var sizeArry;      sizeArry = skuVOList.filter((i, v) => i.colorKey == this.data.nowColor);      var sizeVOList = this.data.sizeVOList      console.log('sizeVOList',sizeVOList);      for (var j in sizeVOList) {        if (sizeArry.find((value, index, array) => value.sizeKey == sizeVOList[j].sizeKey)) {          sizeVOList[j].status = false        } else {          sizeVOList[j].status = true        }      }      console.log('sizeVOList',sizeVOList);      this.setData({        sizeVOList: sizeVOList,        ischange: true      })    }    if (this.data.nowSize) {      //通过尺码选颜色      var colorArry;      colorArry = skuVOList.filter((i, v) => i.sizeKey == this.data.nowSize);      var skcVOList = this.data.skcVOList;      for (var j in skcVOList) {        if (colorArry.find((value, index, array) => value.colorKey == skcVOList[j].colorKey)) {          skcVOList[j].status = false        } else {          skcVOList[j].status = true        }      }      this.setData({        skcVOList: skcVOList,        ischange: true      })    }    if (this.data.nowColor && this.data.nowSize) {      // 执行颜色、尺码都选中后的事情      var nowGoods = skuVOList.filter((i, v) => i.colorKey == this.data.nowColor && i.sizeKey == this.data.nowSize)[0];      console.log('nowGoods',nowGoods)      var promotionSale = nowGoods.promotionDisplay;      this.setData({        proBarCode: nowGoods.barCode,        salePrice: nowGoods.salePrice,        price: nowGoods.standardPrice      })    }  },

转载地址：http://rrpzb.baihongyu.com/