小程序for循环出来的button，点击button的动画实现只对当前button有效

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lily2016n/article/details/81950122

在做项目中发现在对for循环出来的button，添加点击事件的时候，所有button都会生效，那怎么实现只对当前的button有效呢？看下我实现的思路吧。有不明白的可以留言哈
效果图如下

wxml:

 <view wx:for="{{arr}}">
    <button bindtouchstart="ww" bindtouchend="ee" style='background:red;with:200rpx;height:200rpx;text-algin：center;margin-top:50rpx;' animation="{{arr1[0]&&arr1[0] == index ? animationData:''}}" data-item="{{index}}">按钮</button>
</view>
/***判断当新数组的值等于当前下标时才添加此动画就实现了只对当前动画有效了哦***/
/*** wx:for-index 指明后面如果要用数组索引的话，用什么名字，如果名字是 index，则可省略，直接使用。
而 wx:for-item 指明后面如果要用数组索引对应的项的话，用什么名字，如果名字是 item，则可省略，直接使用。***/

js

data:{
 arr:[1,2,3,4,5],
 arr1:[]
}
//按下效果
ww:function(e){
    //这段是重点
    let newarr = [];
    newarr.push(e.currentTarget.dataset.item) 
    this.setData({
      arr1: newarr
    })  //先声明个空数组，把每个按钮的下标赋给新数组


    // console.log(1);
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: "ease",
    })

    this.animation = animation

    animation.scale(0.8, 0.8).opacity(0.5).step();

    this.setData({
      animationData: animation.export()
    })
  },
  //松开效果
  ee:function(){
    // console.log(1);
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: "ease",
    })
    this.animation = animation

    animation.scale(1, 1).opacity(1).step();
    this.setData({
      animationData: animation.export()
    })


  },