258资源分享网

为了让同学们有个直观的了解，到电商网截了一个图片，就是红圈所示的部分现在就为大家介绍这个小组件，在小程序中，该如何去写下图为本项目的图：wxml：view class="title"商品属 ...

为了让同学们有个直观的了解，到电商网截了一个图片，就是红圈所示的部分

现在就为大家介绍这个小组件，在小程序中，该如何去写

下图为本项目的图：

wxml：

[html] view plain copy

<view class="title">商品属性值联动选择</view>  

<!--options-->  

<view class="commodity_attr_list">  

  <!--每组属性-->  

  <view class="attr_box" wx:for="{{attrValueList}}" wx:for-item="attrValueObj" wx:for-index="attrIndex">  

    <!--属性名-->  

    <view class="attr_name">{{attrValueObj.attrKey}}</view>  

    <!--属性值-->  

    <view class="attr_value_box">  

      <!--每个属性值-->  

      <view class="attr_value {{attrIndex==firstIndex || attrValueObj.attrValueStatus[valueIndex]?(value==attrValueObj.selectedValue?'attr_value_active':''):'attr_value_disabled'}}" bindtap="selectAttrValue" data-status="{{attrValueObj.attrValueStatus[valueIndex]}}"  

      data-value="{{value}}" data-key="{{attrValueObj.attrKey}}" data-index="{{attrIndex}}" data-selectedvalue="{{attrValueObj.selectedValue}}" wx:for="{{attrValueObj.attrValues}}" wx:for-item="value" wx:for-index="valueIndex">{{value}}</view>  

    </view>  

  </view>  

</view>  

<!--button-->  

<view class="weui-btn-area">