首页 > 微信 > 详细

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

时间:2020-07-08 14:14:01      阅读:97      评论:0      收藏:0      [点我收藏+]
//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
    })
 },

 

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

原文:https://www.cnblogs.com/minghan/p/13266417.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!