欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-29 14:33:47
...

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

(1)效果:

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

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" data-url="{{item.classify_id}}"  >
      <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:forj基本相同

(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,
     }) 
  },