欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序?qū)崿F(xiàn)商品屬性選擇或規(guī)格選擇

 更新時(shí)間:2021年03月14日 11:25:07   作者:紙上畫(huà)佳人  
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)商品屬性選擇或規(guī)格選擇,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)商品屬性選擇或規(guī)格選擇的具體代碼,供大家參考,具體內(nèi)容如下

實(shí)現(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
   })
  });
 }

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript如何實(shí)現(xiàn)圖片處理與合成

    JavaScript如何實(shí)現(xiàn)圖片處理與合成

    這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)圖片處理與合成,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-05-05
  • 用move.js庫(kù)實(shí)現(xiàn)百葉窗特效

    用move.js庫(kù)實(shí)現(xiàn)百葉窗特效

    本文主要介紹了用move.js庫(kù)實(shí)現(xiàn)百葉窗特效的思路與方法。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧
    2017-02-02
  • JavaScript異步編程中async函數(shù)詳解

    JavaScript異步編程中async函數(shù)詳解

    async函數(shù)是使用async關(guān)鍵字聲明的函數(shù)。 async函數(shù)是AsyncFunction構(gòu)造函數(shù)的實(shí)例, 并且其中允許使用await關(guān)鍵字。async和await關(guān)鍵字讓我們可以用一種更簡(jiǎn)潔的方式寫出基于Promise的異步行為,而無(wú)需刻意地鏈?zhǔn)秸{(diào)用promise
    2022-11-11
  • javascript fullscreen全屏實(shí)現(xiàn)代碼

    javascript fullscreen全屏實(shí)現(xiàn)代碼

    用了實(shí)現(xiàn)打開(kāi)一個(gè)滿屏的代碼
    2009-04-04
  • jqGrid讀取選擇的多行的某個(gè)屬性代碼

    jqGrid讀取選擇的多行的某個(gè)屬性代碼

    這篇文章主要介紹了jqGrid讀取選擇的多行的某個(gè)屬性實(shí)現(xiàn)代碼,需要的朋友可以參考下
    2014-05-05
  • js為鼠標(biāo)添加右擊事件防止默認(rèn)的右擊菜單彈出

    js為鼠標(biāo)添加右擊事件防止默認(rèn)的右擊菜單彈出

    本文為大家介紹下如何為使用js為鼠標(biāo)添加右擊事件防止默認(rèn)的右擊菜單彈出,感興趣的朋友可以參考下,希望對(duì)大家有所幫助
    2013-07-07
  • JavaScript 滾輪事件使用說(shuō)明

    JavaScript 滾輪事件使用說(shuō)明

    用過(guò) Google 地圖的人可能都很熟悉,通過(guò)滾動(dòng)滾輪可以對(duì)地圖進(jìn)行縮放,非常地方便。適當(dāng)?shù)厥褂脻L輪事件可以帶來(lái)不錯(cuò)的用戶體驗(yàn)。
    2010-03-03
  • js獲取input標(biāo)簽的輸入值實(shí)現(xiàn)代碼

    js獲取input標(biāo)簽的輸入值實(shí)現(xiàn)代碼

    input標(biāo)簽的輸入值通過(guò)js進(jìn)行獲取,部分標(biāo)簽和類是封裝在框架內(nèi)的,其效果和html標(biāo)簽差不多,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下,希望對(duì)大家有所幫助
    2013-08-08
  • 前端實(shí)現(xiàn)圖片或視頻預(yù)覽的三種方法總結(jié)

    前端實(shí)現(xiàn)圖片或視頻預(yù)覽的三種方法總結(jié)

    在JavaScript中實(shí)現(xiàn)前端圖片上傳即時(shí)預(yù)覽功能是一項(xiàng)常見(jiàn)的需求,特別是在網(wǎng)頁(yè)交互設(shè)計(jì)中,這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)圖片或視頻預(yù)覽的三種方法,需要的朋友可以參考下
    2024-06-06
  • 淺析ES6與CommonJS中模塊的用法對(duì)比

    淺析ES6與CommonJS中模塊的用法對(duì)比

    ES6?的模塊化汲取了?CommonJS?和AMD?的優(yōu)點(diǎn),擁有簡(jiǎn)潔的語(yǔ)法和異步的支持,并且寫法也和?CommonJS?非常的相似,下面我們就來(lái)看看二者用法的差異吧
    2023-09-09

最新評(píng)論