日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

這篇文章主要為大家詳細介紹了小程序實現商品屬性選擇或規格選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了小程序實現商品屬性選擇或規格選擇的具體代碼，供大家參考，具體內容如下

實現效果

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
        })
    });
}