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

最新推荐文章于 2024-08-11 14:37:31 发布

Python_林一

最新推荐文章于 2024-08-11 14:37:31 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/AndroidAlvin/article/details/105677436

版权

本文介绍了微信小程序中实现商品属性联动选择的详细步骤，包括wxml、wxss和js的代码示例，并提供了一个简化版的demo数据，帮助读者理解如何在小程序中创建此类功能。

摘要由CSDN通过智能技术生成

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

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

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

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

下图为本项目的图：

wxml：

<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">
  <button class="weui-btn" type="primary" bindtap="submit">确定</button>
</view>

wxss：

.title {
  padding: 10rpx 20rpx;
  margin: 10rpx 0;
  border-left: 4rpx solid #ccc;
}
 
/*全部属性的主盒子*/
.commodity_attr_list {
  background: #fff;
  padding: 0 20rpx;
  font-size: 26rpx;
  overflow: hidden;
  width: 100%;
}
/*每组属性的主盒子*/
.attr_box {
  width: 100%;
  overflow: hidden;
  border-bottom: 1rpx solid #ececec;
}
/*属性名*/
.attr_name {
  width: 20%;
  float: left;
  padding: 15rpx 0;
}
/*属性值*/
.attr_value_box {
  width: 80%;
  fl