图库类小程序服务器配置,小程序实现商品属性选择或规格选择

这篇文章主要为大家详细介绍了小程序实现商品属性选择或规格选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了小程序实现商品属性选择或规格选择的具体代码，供大家参考，具体内容如下

实现效果

1、wxml

{{item.name}}

{{item.name}}

2、jsdata: {

//数据

list: [

{

"goods_option_id": 1737,

"option_id": 1737,

"name": "冰度",

"option_value": [

{

"goods_option_value_id": 3606,

"option_value_id": 3606,

"name": "正常冰",

"image": "xxxxxx.png"

},

{

"goods_option_value_id": 3605,

"option_value_id": 3605,

"name": "少冰",

"image": "xxxxxx.png"

},

{

"goods_option_value_id": 3604,

"option_value_id": 3604,

"name": "热饮",

"image": "xxxxxx.png"

}

]

},

{

"goods_option_id": 1738,

"option_id": 1738,

"name": "糖度",

"option_value": [

{

"goods_option_value_id": 3608,

"option_value_id": 3608,

"name": "正常糖",

"image": "xxxxxx.png"

},

{

"goods_option_value_id": 3607,

"option_value_id": 3607,

"name": "少糖",

"image": "xxxxxx.png"

}

]

},

{

"goods_option_id": 1737,

"option_id": 1737,

"name": "冰度",

"option_value": [

{

"goods_option_value_id": 3606,

"option_value_id": 3606,

"name": "正常冰",

"image": "xxxxxx.png"

},

{

"goods_option_value_id": 3605,

"option_value_id": 3605,

"name": "少冰",

"image": "xxxxxx.png"

},

{

"goods_option_value_id": 3604,

"option_value_id": 3604,

"name": "热饮",

"image": "xxxxxx.png"

}

]

}

],

arr: [],

indexArr: []

},

choice(e) {

const fid = e.currentTarget.dataset.fid;

const id = e.currentTarget.dataset.id;

const arr = this.data.arr,

arr2 = this.data.indexArr;

arr[fid] = this.data.list[fid].option_value[id].name;

arr2[fid] = id;

this.setData({

arr: arr,

indexArr: arr2

})

},

onLoad: function (options) {

const res = this.data.indexArr;

this.data.list.forEach((e,i) => {

res[i] = 0;

this.setData({

indexArr: res

})

});

}