小程序?qū)崿F(xiàn)商品屬性選擇或規(guī)格選擇
更新時間：2021年03月14日 11:25:07 作者：紙上畫佳人
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)商品屬性選擇或規(guī)格選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了小程序?qū)崿F(xiàn)商品屬性選擇或規(guī)格選擇的具體代碼，供大家參考，具體內(nèi)容如下
實現(xiàn)效果
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: {
//數(shù)據(jù)
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
})
});
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
下面小編就為大家?guī)硪黄猨s 判斷一組日期是否是連續(xù)的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要給大家介紹了關于微信小程序中數(shù)據(jù)處理的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
這篇文章主要介紹了JS實現(xiàn)一次性彈窗的方法,可實現(xiàn)一次性彈出,刷新后不彈出的功能,涉及JS窗口操作的相關技巧,需要的朋友可以參考下2016-12-12
typeof 返回變量的類型字符串值 、其中包括 “object”、“number”、“string”、“undefined”、“boolean”。這篇文章重點給大家介紹ECMAScript typeof用法，需要的朋友參考下2018-07-07
easyui tree帶checkbox實現(xiàn)單選的簡單實例
下面小編就為大家?guī)硪黄猠asyui tree帶checkbox實現(xiàn)單選的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
整理Javascript函數(shù)學習筆記，之前一系列的文章是跟我學習Javascript，本文就是進一步學習Javascript函數(shù)，希望大家繼續(xù)關注2015-12-12
cordova入門基礎教程及使用中遇到的一些問題總結(jié)
這篇文章主要給大家介紹了關于cordova的入門基礎教程以及在使用中遇到的一些問題，文中通過示例代碼一步步介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-11-11
用于節(jié)點操作的API，顛覆原生操作HTML DOM節(jié)點的API
敏捷開發(fā)是一種以人為核心、迭代、循序漸進的開發(fā)方法。在敏捷開發(fā)中，軟件項目的構(gòu)建被切分成多個子項目，各個子項目的成果都經(jīng)過測試，具備集成和可運行的特征。2010-12-12
下面小編就為大家?guī)硪黄狫avaScript DOM 對象深入了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了JS給按鈕添加跳轉(zhuǎn)功能類似a標簽,需要的朋友可以參考下2017-05-05