小程序循环数据点击动态切换样式

摸鱼小扒菜

已于 2023-03-27 09:37:03 修改

阅读量349

点赞数

文章标签：小程序 javascript html

于 2023-03-24 11:24:57 首次发布

本文链接：https://blog.csdn.net/Zz_Qdm/article/details/129747301

版权

HTML

    <view class="{{className1}}" wx:for="{{list}}" wx:key="key" class="{{index == isIndex?'case_box_fooder2':'case_box_fooder1'}}" bindtap="Checked" data-index='{{index}}'>
          <view>
            报案日期：{{item.b}}
          </view>
          <view>
            报案号：{{item.a}}
          </view>
        </view>

js

//data里面定义
isIndex: null,

//方法
  Checked: function (e) {
    console.log(e.currentTarget.dataset.index, "4444");
    this.setData({
      isIndex: e.currentTarget.dataset.index,
    })
  },

css

.case_box_fooder1 {
  margin: 20rpx 0;
  padding: 10rpx;
  border-radius: 12rpx;
  box-shadow:0 0 6rpx gray;
}
.case_box_fooder2 {
  margin: 20rpx 0;
  padding: 10rpx;
  border-radius: 12rpx;
 box-shadow:0 0 10rpx gray;
  background-color: rgb(250, 247, 244);
}