微信小程序内的css无法做到循环的动态
animationData变成[],数组里很多{}对象,就可以改变单独的值。
WXML:
<view class="context-full">
<block wx:for="{{axis}}" wx:key="id" wx:for-index="idx">
<view data-id='{{idx}}' class="history-item" animation="{{timeLineAnimationData[idx]}}">
<view class="year"><text>{{item.time}}</text></view>
<view class="gradient">
</view>
<view class="circle" >
<view class="point"></view>
</view>
<view class="item-detail">
<text>{{item.event}}</text>
</view>
</view>
</block>
</view>
JS:
Page({
data: {
timeLineAnimationData: [],
},
methods:{
//循环的key值为id,arrName为该循环绑定的数据,因为页面中有多个表单需要加动画
animateArr: function (id,arrName) {
var index = id
var temp_str = arrName+'[' + index + ']';//判断当前点击的 animationData相对应的{}是否为空,如果为空就是走第一个动画,不为空走第二个
if (JSON.stringify(this.data[arrName][index]) != "{}") {
let animation = wx.createAnimation({
duration: 100,
timingFunction: 'ease',
})
this.animation = animation
animation.opacity(1).step()
this.setData({
[temp_str]: animation.export()
});//这个是为动画运行赋值,也就是返回初始状态的
this.setData({
[temp_str]: {}
});//这个是动画返回到初始后将这个animationData相对应的对象值清空,下次就会走第一个动画,不要直接清空,没有效果
} else {
let animation = wx.createAnimation({
duration: 100,
timingFunction: 'ease',
})
this.animation = animation
animation.opacity(1).step()
this.setData({
[temp_str]: animation.export()
});
}
console.log(this.data[arrName]);
},
},
})
使用示例:
this.timeTimer = setInterval( ()=> {
//id==数组的长度
if(id === 9){
clearInterval(this.timeTimer)
} else{
this.animateArr(id,'timeLineAnimationData');
id++
}
}, 500)
axis数组格式
axis:[
{id:1,time:123,event:'123'},
]