提示：在上个版本的移动端商城中，要做一个类似拼多多的sku轮播图选择器的功能，这个功能其实还挺好玩的，难点最主要是轮播图跟sku属性关联起来，看一下拼多多的示例。
提示：以下是本篇文章正文内容，下面案例可供参考
一、了解sku数据组成和前端排列在实现这个功能之前需要先了解一下我们的后端返给前端商品详情的数据结构
代码如下（示例）：
2.在商品详情页使用组件{{src.suk}} ￥{{src.price}} {{ Number(currentIndex) + 1 }} / {{ list.length }}
代码如下（示例）：
js部分：
//点击sku图片打开轮播图
data() {
return {
//......
attr: {
cartAttr: false,
productAttr: [],
productSelect: {}
},
productInfo: {}, //商品详情
productValue: [], //系统属性
skuArr:[],
selectSku:{},
}
}
methods:{
getGoodsDetails: function() {
let that = this;
getProductDetail(that.id, that.type).then(res => {
let productInfo = res.data.productInfo;
for(let key in res.data.productValue){
let obj = res.data.productValue[key];
that.skuArr.push(obj)
}
this.$set(this, "selectSku", that.skuArr[0]);
})
}，
ChangeAttr: function(res) {
let productSelect = this.productValue[res];
this.$set(this, "selectSku", productSelect);
if (productSelect) {
this.$set(this.attr.productSelect, "image", productSelect.image);
this.$set(this.attr.productSelect, "price", productSelect.price);
this.$set(this.attr.productSelect, "stock", productSelect.stock);
this.$set(this.attr.productSelect, "unique", productSelect.id);
this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this.attr.productSelect, "vipPrice", productSelect.vipPrice);
this.$set(this, "attrValue", res);
this.$set(this, "attrTxt", "已选择");
} else {
this.$set(this.attr.productSelect, "image", this.productInfo.image);
this.$set(this.attr.productSelect, "price", this.productInfo.price);
this.$set(this.attr.productSelect, "stock", 0);
this.$set(this.attr.productSelect, "unique", this.productInfo.id);
this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this.attr.productSelect, "vipPrice", this.productInfo.vipPrice);
this.$set(this, "attrValue", "");
this.$set(this, "attrTxt", "请选择");
}
},
showImg(index){
//该事件是商品sku弹框的左上角图片点击事件，通过点击进入轮播图
this.$refs.cusPreviewImg.open(this.selectSku.suk)
},
//滑动轮播图选择商品
changeSwitch(e){
let productSelect = this.skuArr[e];
this.$set(this,'selectSku',productSelect);
var skuList = productSelect.suk.split(',');
this.$set(this.attr.productAttr[0],'index',skuList[0]);
if(skuList.length == 2){
this.$set(this.attr.productAttr[0],'index',skuList[0]);
this.$set(this.attr.productAttr[1],'index',skuList[1]);
}else if(skuList.length == 3){
this.$set(this.attr.productAttr[0],'index',skuList[0]);
this.$set(this.attr.productAttr[1],'index',skuList[1]);
this.$set(this.attr.productAttr[2],'index',skuList[2]);
}else if(skuList.length == 4){
this.$set(this.attr.productAttr[0],'index',skuList[0]);
this.$set(this.attr.productAttr[1],'index',skuList[1]);
this.$set(this.attr.productAttr[2],'index',skuList[2]);
this.$set(this.attr.productAttr[3],'index',skuList[3]);
}
if (productSelect) {
this.$set(this.attr.productSelect, "image", productSelect.image);
this.$set(this.attr.productSelect, "price", productSelect.price);
this.$set(this.attr.productSelect, "stock", productSelect.stock);
this.$set(this.attr.productSelect, "unique", productSelect.id);
this.$set(this.attr.productSelect, "vipPrice", productSelect.vipPrice);
this.$set(this, "attrTxt", "已选择");
this.$set(this, "attrValue", productSelect.suk)
}
}
}
这个功能主要是sku弹框和sku轮播图两个组件之间的事件互相关联很紧密，要在滑动轮播图的时候自动选择好sku的规格，反之，在点击选择sku规格的时候，点进轮播图，也自动选择好对应的图片，在此代码展示和描述有限，如果有兴趣，移步我们的开源电商地址，查看完整代码。
h5示例: CRMEB-JAVA.
gitee开源地址: CRMEB-JAVA.
都看到这里了，点击上面gitee链接给个star吧
