小程序规格切换通过数据改变状态

数据都是动态的，所以用的最笨的方法，操控数据，操控标签恐怕是不行的，话不多说上代码
wxml





{{item.pname}}

{{items.value}}






时长

-



+



确定

wxSS
.pecifications {
margin-top: 40%;
background-color: #fff;
border-radius: 50rpx 50rpx 0 0;
}

.pecifications .peciTop {
height: 252rpx;
}

.pecifications .ExternalText {
color: #333333;
font-size: 34rpx;
font-weight: 700;
}

.pecifications .contents {
background-color: #F5F5FA;
margin-top: 24rpx;
display: inline-block;
margin-right: 40rpx;
color: #999999;
font-size: 26rpx;
border-radius: 25rpx;
}

.pecifications .External {
margin-left: 50rpx;
margin-top: 50rpx;
margin-bottom: 24rpx;
}

/* 数量计算*/
.footer {
height: 308rpx;
}

.number {
display: flex;
margin-left: 50rpx;
margin-right: 43rpx;
}

.number .numberRight {
width: 180rpx;
display: flex;
height: 43rpx;
line-height: 43rpx;
color: #999999;
margin-left: auto;
}

.number .reduce {
width: 46rpx;
text-align: center;
font-size: 28rpx;
color: #999999;
border: 1rpx solid #EEEEEE;
}

.number .nums {
width: 90rpx;
border: 1rpx solid #EEEEEE;
text-align: center;
}

.number .nums input {
margin-top: -6rpx;
font-size: 28rpx;
color: #121924;
}

.number .numPuls {
width: 46rpx;
border: 1rpx solid #EEEEEE;
text-align: center;
}
.bottomBtn {
position: fixed;
bottom: 40rpx;
height: 88rpx;
line-height: 88rpx;
width: 100%;
}
.bottomBtn .btn-concent {
margin: 0 32rpx;
font-size: 34rpx;
text-align: center;
color: #fff;
background: linear-gradient(142deg, #4A36FF 0%, #E915FF 100%);
border-radius: 44px;
}
.activeBk {
background-color: #D6D5FF;
color: #6967F4;
}

WX.JS
const app = getApp()
Component({
/**

• 组件的属性列表
  */
  properties: {

},

/**

• 组件的初始数据
  */
  data: {
  inputValu:1,
  selects:-1,
  },

/**

• 组件的方法列表
  */

methods: {
onLoad:function(options) {
let list = app.globalData.goodsDetail.skuDisplay;
for(var i = 0; i < list.length; i++) {
for(var j = 0; j < list[i].skuValues.length; j++) {
list[i].skuValues[j][‘ids’] = ‘’
}
}
this.setData({
specList:app.globalData.goodsDetail,
specListData: list
})
},
handleClick:function(e) {
let parId = e.currentTarget.dataset.parentid;//父元素id
let childId = e.currentTarget.dataset.child;//子元素id
for(let i = 0; i < this.data.specListData.length; i++) {
if(this.data.specListData[i].pid == parId){ //找到对应子级
for(let j = 0; j < this.data.specListData[i].skuValues.length; j++) {
this.data.specListData[i].skuValues[j].id == childId //如果找到对应的子级id
this.data.specListData[i].skuValues[j].ids = childId //如果找到对应的子级id
}
}
}
this.setData({
specListData:this.data.specListData
})
}
}
})

//数据看自己后台返回了，我只能了一行
specListData:[ {skuValues: [], pname: “时长”, pid: “1”}
{skuValues: [idJoin: “1:1;”, pname: “时长”, pid: “1”, id: “1”, valueJoin: “时长:一个月;”,] pname: “费用”, pid: “2”},{id: “3”
idJoin: “1:3;”
pid: “1”
pname: “时长”
value: “2个月”
valueJoin: “时长:2个月;”
]