原因：因为没有发现好用的组件，所以自己写了样式和判断方法，实际使用在真机演示时略显卡顿，等待后续优化
wxml：
商品图片、价格、以及选择规格颜色等信息
<view class="popup_information"> <image src="{{data.productList[0].url}}" mode="" /> <view class="money"> <view>￥{{select_show?data.productList[0].price:select_conter.price}}{{select_show?'':'.00'}}</view> <view class="select_mr"> <view>{{select_show?'请选择':'已选'}}</view> <block wx:for="{{data.specificationList}}" wx:key="index"> <view wx:if="{{!item.show}}">{{item.name}}</view> </block> <block wx:for="{{select_conter.specifications}}" wx:key="index"> <view wx:if="{{!select_show}}">{{item}}</view> </block> </view> </view> </view> 选择规格颜色等tag <block wx:for="{{data.specificationList}}" wx:key="index"> <view class="specifications"> <view> {{item.name}} </view> <block wx:for="{{item.valueList}}" wx:key="index"> <view data-id="{{item.id}}" bindtap="{{item.deleted=='nul'?'':'xuanze'}}" style="background: {{item.deleted=='nul'?'#f7f8fa':item.deleted?'#fde6e9':'#f7f8fa'}};color: {{item.deleted=='nul'?'#c8c9cc':item.deleted?'#ee0a24':'#323233'}};" class="specifications_item"> {{item.value}} </view> </block> </view> </block> js data: { radio: true, ddd:false, gwc: 0, id: '', show: false, show2: false, number: 1, select_show:true, select_conter:{}, qd:[] }, // 选择商品 xuanze(e){ let data = this.data.data let a=0 let b=0 for(let i in data.specificationList){ for(let j in data.specificationList[i].valueList){ if(data.specificationList[i].valueList[j].id==e.currentTarget.dataset.id){ data.specificationList[i].valueList[j].deleted=!data.specificationList[i].valueList[j].deleted a=i b=j break } } } this.setData({ data }) this.yanzheng(a,b,data.specificationList[a].valueList[b].deleted) }, // 验证tag选择状态 yanzheng(a,b,key){ let data = this.data.data //还原其他行不可选状态 for(let i in data.specificationList){ if(i!=a){ for(let j in data.specificationList[i].valueList){ if(data.specificationList[i].valueList[j].deleted=='nul'){ data.specificationList[i].valueList[j].deleted=false } } } } this.setData({ data }) // 验证本行 if(key){ for(let i in data.specificationList[a].valueList){ if(i!=b&&data.specificationList[a].valueList[i].deleted!='nul'){ data.specificationList[a].valueList[i].deleted=false } } this.setData({ data }) // 验证其它行可选状态 for(let i in data.productList){ if(data.productList[i].specifications[a]==data.specificationList[a].valueList[b].value){ if(data.productList[i].number==0){ for(let j in data.specificationList){ if(j!=a){ for(let d in data.specificationList[j].valueList){ if(data.specificationList[j].valueList[d].value==data.productList[i].specifications[j]){ data.specificationList[j].valueList[d].deleted='nul' } } } } } } } this.setData({ data }) } this.jilu() }, // 记录选项 jilu(){ let data = this.data.data let qd = [] for(let i in data.specificationList){ for(let j in data.specificationList[i].valueList){ if(data.specificationList[i].valueList[j].deleted&&data.specificationList[i].valueList[j].deleted!='nul'){ data.specificationList[i].show=true qd[i] = data.specificationList[i].valueList[j].value break } data.specificationList[i].show=false } } // 判断选择状态 for(let i in data.specificationList){ this.setData({ select_show:false }) if(!data.specificationList[i].show){ this.setData({ select_show:true }) break } } this.setData({ data, qd }) if(!this.data.select_show){ this.queding() }else{ this.setData({ select_conter:[] }) } }, // 确定选择项 queding(){ let data = this.data.data let qd = this.data.qd let select_conter='' for(let i in data.productList){ if(select_conter==''){ select_conter=data.productList[i] } for(let j in data.productList[i].specifications){ if(data.productList[i].specifications[j]!=qd[j]){ select_conter='' break } } if(select_conter!=''){ break } } this.setData({ select_conter }) }, 标签：界面,show,规格,let,select,valueList,specificationList,data,商城 From： https://www.cnblogs.com/bkk2h5l0/p/17528411.html