微信小程序商城项目之商品属性分类（4）

微信小程序商城项目之商品属性分类（微信小程序商城项目之商品属性分类（4））

主要为大家详细介绍了微信小程序商城项目之商品属性值联动选择,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

续上一篇的文章：微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）

所提及的购物数量的加减，现在说说商品属性值联动选择。

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

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

下图为本项目的图：

wxml：

<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-->

margin: 10rpx 0;

border-left: 4rpx solid #ccc;

}

/*全部属性的主盒子*/

.commodity_attr_list {

background: #fff;

padding: 0 20rpx;

font-size: 26rpx;

overflow: hidden;

border-bottom: 1rpx solid #ececec;

}

/*属性名*/

.attr_name {

width: 20%;