思路：用数据驱动事件，用数组的方式去对循环数组的每个对象进行操作
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>