微信小程序--给数组的每个对象添加动画（数据驱动）

思路：用数据驱动事件，用数组的方式去对循环数组的每个对象进行操作

js代码：

data:{

selectCategory: [{ name: '生产模式', content: [{ txt: '原厂' }, { txt: '生产代工' }, { txt: '生产设计' }, { txt: '其他' }] }, { name: '货源类别', content: [{ txt: '现货' }, { txt: '需采购' }, { txt: '需生产' }, { txt: '其他' }] }, { name: '出货周期', content: [{ txt: '现货' }, { txt: '需采购' }, { txt: '需生产' }, { txt: '其他' }] }, { name: '发货地省份', content: [{ txt: '北京' }, { txt: '上海' }, { txt: '湖南' }, { txt: '广东' }, { txt: '浙江' }]}],

rotateAnimation:[], //箭头旋转动画

animationOff:[false,false,false,false] //控制筛选内容的显示开关

}

给每个人数组添加新属性：(checked:false)

onLoad:function (options) {

this.setAnimation();

let { selectCategory, save } = this.data;

selectCategory.forEach(x=>{

x.content.filter(x=>{

x.checked = false

})

})

this.setData({

selectCategory

})

},

动画方法：

//箭头动画

makeAnimate(e){

let {index}=e.currentTarget.dataset;

let { rotateAnimation, animationOff}=this.data;

let animation=wx.createAnimation({

duration:200,

timingFunction:'linear',

delay:0

})

if (animationOff[index]){

animation.rotate(0).step();

}else{

animation.rotate(180).step();

}

rotateAnimation[index] = animation.export();

animationOff[index] = !animationOff[index];

this.setData({

rotateAnimation: rotateAnimation,

animationOff: animationOff

})

}

//wxml代码

<view class="category-block" wx:for="{{selectCategory}}" wx:key="">

<view class="category-title" data-index="{{index}}" bindtap="makeAnimate">

<text class="category">{{item.name}}</text>

<image animation="{{rotateAnimation[index]}}" src="/images/down.png"></image>

</view>

<view class="category-cnt" wx:if="{{animationOff[index]}}">

<text class="txt-style {{childItem.checked?'bg-color':''}}{{index==3?'save':''}}" data-index="{{index}}" data-childIndex="{{chidIndex}}" bindtap="checked" wx:for-index="chidIndex" wx:for="{{item.content}}" wx:for-item="childItem" wx:key="">{{childItem.txt}}</text>

</view>

</view>