微信小程序---多项选中（单选）

ゝ一纸荒年。 2022-03-09 16:14 256阅读 0赞

index.wxml

index.wxss:

.list {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 84%;
      margin: 0 auto;
      margin-top: 40rpx;
    }
    
    .colorList {
      width: 25%;
      text-align: center;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    .list .white {
      width: 100rpx;
      height: 100rpx;
      background: #faf9f5;
      border: 2px solid #fff;
      border-radius: 54rpx;
      box-shadow: 0 0 50rpx rgba(41, 47, 83, 0.2);
      position: relative;
    }
    
    .list .red {
      width: 100rpx;
      height: 100rpx;
      background: #981616;
      border: 2px solid #fff;
      border-radius: 54rpx;
      box-shadow: 0 0 50rpx rgba(213, 2, 39, 0.3);
      position: relative;
    }
    
    .list .blue {
      width: 100rpx;
      height: 100rpx;
      background: #77bce1;
      border: 2px solid #fff;
      border-radius: 54rpx;
      box-shadow: 0 0 50rpx rgba(13, 66, 162, 0.3);
      position: relative;
    }
    
    .list .colorTitle {
      font-size: 32rpx;
      color: #000;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
    }
    .close{
        text-align: center;
      width: 100rpx;
      height: 100rpx;
    }
    .close image{
      width: 27rpx;
      height: 27rpx;
    
    }
    .on image{
      width: 39rpx;
      height: 28rpx;
      margin-top:36rpx;
    }
    .show {
      display: block;
    }
    
    .hidden {
      display: none;
    }

index.js

Page({
    
      data: {
        idx: 0
      },
      toggleBtn: function(e) {
        var that = this;
        var index = e.currentTarget.id
        this.setData({
          idx: index
        })
        console.log(that.data.idx)
    
      },
    })