微信小程序实现商品属性筛选功能-选中未选中颜色变化

微信小程序实现商品属性筛选功能，未选中是白色背景选中是蓝色背景

源代码下载地址：

http://www.phonegap100.com/thread-4946-1-1.html

小程序视图

 
<view class='wraps'>

  <view class='wrap' wx:for="{{options}}" wx:for-index="indexs" wx:for-item="oname">
    <view class='name'>{{oname.name}}</view>
    <view class='des'>
    
      <view class="{{item.checked?'active':'desitem'}}" wx:for="{{oname.items}}" catchtap="stoggle" data-parentindex="{{indexs}}" data-currentindex="{{index}}">
      
        {{item.msg}}
      
      </view>
      
      
    </view>
  </view>
  

</view>

小程序css

.wraps{
  /* width: 100%; */
  padding: 20rpx;
}


.name{
 
  line-height: 100rpx;
}
.des{
  width: 100%;
  
  border: 1px solid #ccc;
  display: flex;
  /* flex-direction: row; */
  /* flex-wrap: wrap; */
}
.desitem{
  display: inline-block;
  background: #ccc;
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  border-radius: 10rpx;
  
 }
.active{
   background: #f00;
   color: #fff;
 }

小程序业务逻辑：

// pages/text4/text4.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
   
    options: [{
        items: [{
          'msg': '绿色',
          "id": "11",
          "chekced":true
        }, {
          'msg': "红色",
          "id": "12"
        }],
        name: "颜色"
      }, {
        items: [{
          'msg': "XXX",
          "id": "13"
        }, {
          'msg': "L",
          "id": "14"
        }, {
          'msg': "XXL",
          "id": "15"
        }],
        name: "型号"
      }, {
        items: [{
          'msg': "32G",
          "id": "16"
        }, {
          'msg': "8G",
          "id": "17"
        }, {
          'msg': "4G",
          "id": "18"
        }],
        name: "版本"
      }] 
  },

  stoggle: function (e) {
    
    var parentIndex = e.currentTarget.dataset.parentindex;
    var currentIndex = e.currentTarget.dataset.currentindex;
   
   
    var options = this.data.options;

    

    for (var i = 0; i < options.length ;i++){    
   
      if (i == parentIndex){

        console.log(parentIndex);
        for (var j = 0; j < options[i].items.length; j++) {

           options[i].items[j].checked=false;
        }       
        
        options[i].items[currentIndex].checked = true;
      }
    }

    console.log(options);
    this.setData({
      options: options
    })
    
 
   
  } 

 
})

gogogosns 1楼•5 年前作者

多选可用