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

在这里插入图片描述
数据都是动态的,所以用的最笨的方法,操控数据,操控标签恐怕是不行的,话不多说上代码
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个月;”
]

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值