Micro letter applet to change the style selected, select cancel, limit the number of selected

The first to write a variable in the data designed to change state

Page({

      data: {
        change: false
       },

    
})

Options:

<!--wxml-->
 <view class="{{change? 'choose':'no_choose'}}" catchtap="changeto">选项</view>

Then js in the method:

changeto: function(e) {
 
        if (this.data.change== false) {
          this.setData({
            change: true
          })
        } else {
          this.setData({
            change: false
          })
        }
}

 

Determine the current status, when clicked to change if it is false to true, false in wxml in style and true view associated label.

I set the style:

.no_choose{
  display: flex;
  align-items: center;
  width: 180rpx; 
  height: 100rpx;  
  border: 3rpx solid blue;  
  justify-content: center;
  margin-left: 30rpx;  
  margin-top: 60rpx;
  font-size: 25rpx;
  
}
.choose{
  display: flex;
  align-items: center;
  width: 180rpx; 
  height: 100rpx;  
  border: 3rpx solid orange;  
  justify-content: center;
  margin-left: 30rpx;  
  margin-top: 60rpx;
  color: orange;
  font-size: 25rpx;
}

 

If a large number of options, we must have a number of different methods and decisions of state variables.

If more than one option only allows a selected outside a bread if:

changeto1: function(e) {
        if ( this.data.change2 == false && this.data.change3==false) {
        if (this.data.change1 == false) {
          this.setData({
            change1: true
          })
        } else {
          this.setData({
            change1: false
          })
         }
        }
},