小程序选中和未选中的实现

效果图：

wxml:

<!-------------------- 选择版本 ------------------->
<view class="size">选择版本</view>
 <scroll-view scroll-x >
 <view class="con">
  <view  wx:for="{{banben}}" wx:key="" data-index="{{index}}"  bindtap='goSize'>
    <view class="{{index==idxSize?'_item-size':'item-size'}}" >{{item.size}}</view>
  </view>
 </view>
</scroll-view>


<!-------------------- 选择颜色 ------------------->
<view class="color">选择颜色</view>
 <scroll-view scroll-x >
 <view class="con">
  <view  wx:for="{{banben}}" wx:key="" data-index="{{index}}"  bindtap='goColor'>
    <view class="{{index==idxColor?'_item-color':'item-color'}}" >{{item.color}}</view>
  </view>
 </view>
</scroll-view>

wxss:

/********************* 选择版本 *******************/

.con{
  display: flex;
  margin-top: 20rpx;
  
}
.size{
  margin-top: 40rpx;
  font-size: 38rpx;
  margin-left: 30rpx;
  
}
.color{
  margin-top: 40rpx;
  font-size: 38rpx;
  margin-left: 30rpx;
}

.item-size{
 font-size: 25rpx;
 border: solid 1rpx  #cccccc;
 margin-left: 30rpx;
 margin-bottom: 20rpx;
 padding:10px 40px 10px 40px; 
}

._item-size{
 font-size: 25rpx;
 border: solid 1rpx  #0e73e7;
 margin-left: 30rpx;
 margin-bottom: 20rpx;
 padding:10px 40px 10px 40px; 
}

.item-color{
 font-size: 25rpx;
 border: solid 1rpx  #cccccc;
 margin-left: 30rpx;
 margin-bottom: 20rpx;
 padding:10px 30px 10px 30px; 
}

._item-color{
 font-size: 25rpx;
 border: solid 1rpx  #0e73e7;
 margin-left: 30rpx;
 margin-bottom: 20rpx;
 padding:10px 30px 10px 30px; 
}

js:

data: {
    // 使用data数据对象设置样式名
    minusStatus: 'disabled',
    idxSize:0,
    idxColor: 0,
  },

//选中的效果index 
  goSize(e) {
    var index = e.currentTarget.dataset.index;
    // console.log('每个index',index)
    this.setData({
      idxSize: index
    })
  },

  //选中的效果index 
  goColor(e) {
    var index = e.currentTarget.dataset.index;
    // console.log('每个index',index)
    this.setData({
      idxColor: index
    })
  },

 

来源：CSDN

作者：江南一丝凉意

链接：https://blog.csdn.net/weixin_44079650/article/details/103710118