微信小程序之商品属性分类 —— 微信小程序实战商城系列（4）

2 下载量 160 浏览量更新于2023-03-03 评论收藏 146KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

试读

11页

续上一篇的文章：微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）所提及的购物数量的加减，现在说说商品属性值联动选择。续上一篇的文章：微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）所提及的购物数量的加减，现在说说商品属性值联动选择。为了让同学们有个直观的了解，到电商网截了一个图片，就是红圈所示的部分 (此图片来源于网络，如有侵权，请联系删除! ) 现在就为大家介绍这个小组件，在小程序中，该如何去写下图为本项目的图： (此图片来源于网络，如有侵权，请联系删除! ) wxml： [html] view plain copy <view class="t

资源详情

资源评论

资源推荐

微信小程序之商品属性分类微信小程序之商品属性分类 —— 微信小程序实战商城系列微信小程序实战商城系列

（（4））

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

说说商品属性值联动选择。

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

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

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

(此图片来源于网络，如有侵权，请联系删除! )

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

下图为本项目的图：

(此图片来源于网络，如有侵权，请联系删除! )

wxml：

[html] view plain copy

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

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

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

wxss：

[css] view plain copy

.title {

padding: 10rpx 20rpx;

margin: 10rpx 0;

border-left: 4rpx solid #ccc;