小程序规格选择弹窗，默认显示选中的规格，点击切换别的规格，踩过的坑，分享下经验！

//html <view class="show-popup" hidden="{{hideShopPopup}}"> <view class="popup-mask" bindtap="closePopupTap"></view> <view class="popup-contents"> <view class="pop-goods-info"> <view class="pop-img-box"> <image src="https://shop.linkeddream.com{{goodList.showimages[0]}}" class="goods-thumbnail" /> </view> <view class="pop-goods-des"> <view class="pop-goods-title">{{goodList.name}}</view> <view class="pop-goods-price">¥ {{skushownewprice}} 库存{{skushowstock}}件</view> <!-- <view class="pop-goods-price" wx:if="{{shopType =='pingtuan'}}">¥ {{selectptPrice}}</view> --> </view> <view class="pop-goods-close" bindtap="closePopupTap"></view> </view> <view class="size-label-box"> <block wx:for="{{goodList.showsku}}" wx:for-item="property" wx:for-index="idx" wx:key="id"> <view class="label">{{property.name}}</view> <view class="label-item-box"> <view wx:for="{{property.values}}" class="label-item {{item.active ? 'active' : '' }}" wx:key="id" bindtap="labelItemTap" data-propertyindex="{{idx}}" data-propertyid="{{property.id}}" data-propertyname="{{property.name}}" data-propertychildindex="{{index}}" data-propertychildid="{{item.id}}" data-propertychildname="{{item.name}}"> <!-- 这里踩过一次坑，代码写的没有问题，然后鼠标点击后一直不显示选中的高亮，折腾了大半天才发现在js中循环遍历添加完状态后，没有重新去给数组赋值setData --> {{item.name}} </view> </view> </block> </view> <view class="buy-num-box"> <view class="num-label">购买数量</view> <view class="num-box"> <view class="num-jian {{buyNumber == buyNumMin ? 'hui': ''}}" bindtap="numJianTap">-</view> <view class="num-input"> <input type="number" value="{{buyNumber}}" disabled/> </view> <view class="num-jia {{buyNumber== buyNumMax ? 'hui': ''}}" bindtap="numJiaTap">+</view> </view> </view> <view class="popup-join-btn" wx:if="{{shopType =='addShopCar'}}" bindtap="addShopCar">加入购物车</view> <view class="popup-join-btn" wx:if="{{shopType =='tobuy'}}" bindtap="buyNow"> 立即购买</view> </view> </view> .show-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999; } .popup-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 5; } .popup-contents { position: fixed; left: 0; bottom: 0; width: 100%; background-color: #fff; z-index: 6; } .pop-goods-info { display: flex; flex-direction: row; align-items: center; margin-left: 30rpx; padding: 30rpx 0; border-bottom: 1px solid #f5f5f5; } .pop-img-box { width: 120rpx; height: 120rpx; overflow: hidden; margin-right: 26rpx; } .pop-img-box .goods-thumbnail { width: 120rpx; height: 120rpx; } .pop-goods-title { width: 484rpx; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 26rpx; color: #000; } .pop-goods-price { font-size: 26rpx; color: #b5272d; margin-top: 20rpx; } .pop-goods-close { width: 36rpx; height: 36rpx; flex: 1; background: url("https://cdn.it120.cc/images/weappshop/popup-close.png") no-repeat center center; background-size: 36rpx auto; align-self: flex-start; margin-top: -10rpx; } .size-label-box .label { font-size: 26rpx; color: #000; padding-left: 30rpx; padding: 30rpx 0 20rpx 30rpx; } .size-label-box .label-item-box { display: flex; margin-left: 30rpx; flex-direction: row; flex-wrap: wrap; } .size-label-box .label-item { font-size: 26rpx; color: #000; padding: 14rpx 20rpx; border: 1px solid #ddd; border-radius: 6rpx; margin: 0 20rpx 20rpx 0; } .size-label-box .label-item.active { color: #b5272d; border: 1px solid #b5272d; } .buy-num-box { display: flex; justify-content: space-between; padding: 30rpx 30rpx 48rpx 0; margin-left: 30rpx; border-top: 1px solid #f5f5f5; margin-top: 30rpx; align-items: center; } .num-label { font-size: 26rpx; color: #000; } .buy-num-box .num-box { display: flex; } .buy-num-box .num-box .num-jian, .buy-num-box .num-box .num-input, .buy-num-box .num-box .num-jia { width: 80rpx; height: 64rpx; line-height: 62rpx; text-align: center; border: 1px solid #eee; } .buy-num-box .num-box .num-input { font-size: 28rpx; } .buy-num-box .num-box .num-input input { height: 100%; } .popup-join-btn { width: 100%; height: 89rpx; text-align: center; line-height: 89rpx; font-size: 34rpx; color: #fff; background-color: #b5272d; } .buy-num-box .num-box .hui { background-color: #f5f5f9; }

这里开始js逻辑代码了，一开始是手动让用户去添加属性规格，后来项目经理又让改成用户进来就是默认选中所有规格的第一个属性，下面用代码展示遇到的坑吧

page({ data:{ values:[],//这是定义好的空数组 } /** * 规格选择弹出框隐藏 */ closePopupTap: function () { console.log(this.data.goodList) this.setData({ hideShopPopup: true }) }, //数量减 numJianTap: function () { if (this.data.buyNumber > this.data.buyNumMin) { var currentNum = this.data.buyNumber; currentNum--; this.setData({ buyNumber: currentNum }) } }, //数量加 numJiaTap: function () { if (this.data.buyNumber < this.data.buyNumMax) { var currentNum = this.data.buyNumber; currentNum++; this.setData({ buyNumber: currentNum }) } }, /** * 选择商品规格 * @param {Object} e */ labelItemTap: function (e) { console.log(e,'规格当前点击的状态') var that = this; // 取消该分类下的子栏目所有的选中状态 var childs = that.data.goodList.showsku[e.currentTarget.dataset.propertyindex].values; console.log(that.data.values,childs,'选中的规格属性',that.data.goodList) for (var i = 0; i < childs.length; i++) { that.data.goodList.showsku[e.currentTarget.dataset.propertyindex].values[i].active = false; } // // 设置当前选中状态 that.data.goodList.showsku[e.currentTarget.dataset.propertyindex].values[e.currentTarget.dataset.propertychildindex].active = true; console.log("hahahahhahaha",that.data.goodList) //获取当前选中状态id that.data.values[e.currentTarget.dataset.propertyindex] = that.data.goodList.showsku[e.currentTarget.dataset.propertyindex].values[e.currentTarget.dataset.propertychildindex].id; console.log(that.data.values); var skushowpricekey = ""; for (var p = 0; p < that.data.values.length; p++) { if(that.data.values[p]){ if(p==that.data.values.length-1){ skushowpricekey+= that.data.values[p]; }else{ skushowpricekey+= that.data.values[p]+","; } } } console.log(skushowpricekey) for(var key in that.data.goodList.skulist){ var skushownewprice = that.data.goodList.skulist[key].newprice; var skushowstock = that.data.goodList.skulist[key].stock; var skushowprice = that.data.goodList.skulist[key].price; if(key==skushowpricekey){ that.setData({ skushowprice : skushowprice,//原价 skushowstock : skushowstock, //库存 skushownewprice: skushownewprice, //现价 skushowpricekey:skushowpricekey,//选中的商品规格ID }) // console.log(that.data.skushowprice) } } // 获取所有的选中规格尺寸数据 var needSelectNum = that.data.goodList.showsku.length; var curSelectNum = 0; var propertyChildIds = ""; var propertyChildNames = ""; for (var i = 0; i < that.data.goodList.showsku.length; i++) { childs = that.data.goodList.showsku[i].values; for (var j = 0; j < childs.length; j++) { if (childs[j].active) { curSelectNum++; propertyChildIds = propertyChildIds + that.data.goodList.showsku[i].id + ":" + childs[j].id + ","; propertyChildNames = propertyChildNames + that.data.goodList.showsku[i].name + ":" + childs[j].name + " "; } } } //判断是否选中所有规格 var canSubmit = false; if (needSelectNum == curSelectNum) { canSubmit = true; } that.setData({ values:that.data.values,//保存价格和库存 goodList:that.data.goodList, canSubmit:canSubmit,//判断全部选中规格没有 }) }, // 默认选中的商品规则 clickItemTap:function(){ var that = this; var childs = that.data.goodList.showsku; var skushowpricekey = ""; for (var i = 0; i < childs.length; i++) { childs[i].values[0].active = true; //就是在这一部踩的坑，前面的逻辑全都写出来了，然后当时想的是因为需要给后台传规格的属性id，id又都是循环拼接出来的字符串，如果在点击事件里去重新拼接字符串会很麻烦，后来仔细屡了屡思路发现在全局data中已经定义好一个valus数组，这个数组不管你前后点击选中的数据都会从第一个属性id开始循环，这下问题就解决了，不管点击几次id始终都是重新排序去跟后台数据接口id对比（就是这段代码解决了所有问题，that.data.values[i] = childs[i].values[0].id;） that.data.values[i] = childs[i].values[0].id; if(i==childs.length-1){ skushowpricekey+= childs[i].values[0].id; }else{ skushowpricekey+= childs[i].values[0].id +","; } } console.log(that.data.values,childs,'选中的规格属性',that.data.goodList) console.log(skushowpricekey,'我是id') for(var key in that.data.goodList.skulist){ var skushownewprice = that.data.goodList.skulist[key].newprice; var skushowstock = that.data.goodList.skulist[key].stock; var skushowprice = that.data.goodList.skulist[key].price; if(key==skushowpricekey){ that.setData({ skushowprice : skushowprice,//原价 skushowstock : skushowstock, //库存 skushownewprice: skushownewprice, //现价 skushowpricekey: skushowpricekey,//选中的商品规格ID }) // console.log(that.data.skushowprice) } } // 获取所有的选中规格尺寸数据 var needSelectNum = that.data.goodList.showsku.length; var curSelectNum = 0; for (var i = 0; i < that.data.goodList.showsku.length; i++) { childs = that.data.goodList.showsku[i].values; for (var j = 0; j < childs.length; j++) { if (childs[j].active) { curSelectNum++; } } } //判断是否选中所有规格 var canSubmit = false; if (needSelectNum == curSelectNum) { canSubmit = true; } that.setData({ goodList:that.data.goodList, canSubmit:canSubmit,//判断全部选中规格没有 }) }, })