18910140161

小程序循环点击使用js添加css样式

2021-10-21 13:47:21

193

//wxml
<block wx:for="{{Listsimg}}" wx:key=\'unique\'>
    <block wx:if="{{index == clickId}}">
       <view class="img" style="border:{{border}};box-shadow:{{borders}}" id="{{index}}" bindtap="imgList" data-data="{{item}}">
           <image src="{{item.imgList}}" />
       </view>
    </block>
    <block wx:else>
       <view class="img" id="{{index}}" bindtap="imgList" data-data="{{item}}">
           <image src="{{item.imgList}}" />
       </view>
    </block>
</block>
//js
 data: {
      Listsumg: [
        {
          imgList: \'../../images/1.jpg\'
        },
        {
          imgList: \'../../images/2.jpg\'
        },
        {
          imgList: \'../../images/3.jpg\'
        }
      ],
      border:\'\',
      clickId:\'\',
      borders:\'\'
},
imgList:function(e){
    console.log(this.data.imgLists[e.currentTarget.id])
    this.setData({
       border:"1rpx solid #eee",
       borders:\'10rpx 10rpx 10rpx rgba(141, 161, 167, 0.9);\',
       clickId:e.currentTarget.id
    })
 },

 

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航