小程序---给wx:for循环view以及其他控件点击时添加或修改样式

1.点击wx:for循环的view时添加或修改样式

（1）效果：

点击方便速食前

点击方便速食后

2.wxss代码

先写两个class样式一个是未选中是的一个是选中后的样式:

/*点击前的样式*/
.classify_normal{
width: 160rpx;
height: 110rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #E4E4E4;
border-top: solid 1rpx white;
}
/*被点击选中后的样式*/
.is_checked{
width: 158rpx;
height: 110rpx;
display: flex;
justify-content: center;
align-items: center;
background-color:white;
border-bottom: solid 2rpx #E4E4E4;
border-left: solid 4rpx red;
}

(3)wxml代码

重要代码：
{{key==index?‘is_checked’:‘classify_normal’}}
data-index=’{{index}}’

<!-- 左边分类栏 -->
  <view class="left">
    <view wx:for="{{classify}}"  wx:key="key" >
      <view class="{{key==index?'is_checked':'classify_normal'}}" bindtap="Checked"  data-index='{{index}}'>{{item.classify_name}}      </view>
    </view>
  </view>

(4)js代码

重要代码：
e.target.dataset.index—当前点击的下标值

data: {
     key: 0,
     }
 /*点击商品类别的方法 */
Checked:function(e){
   this.setData({
     key: e.target.dataset.index
     }) 
  },

2.其他控件点击时添加或修改样式

与wx:for基本相同

（1）wxss与wx：for相同

先写两个class样式一个是未选中是的一个是选中后的样式:这里就省略了

（2）wxml代码

重要代码：
{{isCheck?‘is_checked’:‘classify_normal’}}
data-index=’{{index}}’

  <view class="left">
    <view wx:for="{{classify}}"  wx:key="key" data-url="{{item.classify_id}}"  >
      <view class="{{isCheck?'is_checked':'classify_normal'}}" bindtap="Checked"  data-index='{{index}}'>{{item.classify_name}}      </view>
    </view>
  </view>

(3)js代码

data: {
     isCheck:flase,
     }
 /*点击方法 */
Checked:function(e){
   this.setData({
     isCheck:true,
     }) 
  },