小程序实现商品属性选择或规格选择

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

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

实现效果

1、wxml

<view wx:for="{{list}}" wx:key="index" wx:key="index" wx:for-index="childIndex" style="margin: 40px 0">
    <view>{{item.name}}</view> 
 
    <view class="s" wx:for="{{item.option_value}}" wx:key="index" >
        <text class="{{indexArr[childIndex] == index ? 'active':''}}" bindtap="choice" data-fid="{{childIndex}}" data-id="{{index}}">
            {{item.name}}
        </text>
    </view>
</view>

2、js

data: {
    //数据
    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
        })
    });
}