<view class="bar-container">
<view class="moving-bar {{ item.isOpen ? 'running' : 'paused' }}" wx:for="{{item.bars}}" wx:key="index" style="animation-delay: {{item.delay}}s;">
</view>
<text>{{item.isOpen}}</text>
</view>
.bar-container {
height: 40px; /* 使容器充满屏幕 */
display: flex;
width: calc(100% - 140rpx);
justify-content: space-around; /* 竖条之间均匀分布 */
align-items: center; /* 竖条从中间开始 */
margin:3px 10px;
background-color: #AAE9E8;
border-radius: 50px;
padding: 0px 48px 0px 18px;
}
.moving-bar {
width: 2px;
height: 13px;
background-color: #11AEAC;
animation: moveUpDown 0.8s ease-in-out infinite;
}
.running {
animation-play-state: running;
}
.paused {
animation-play-state: paused;
}
@keyframes moveUpDown {
0% {
height: 10px; /* 起始高度 */
/* margin-top: -6px; */
}
50% {
height: 20px; /* 中间高度 */
/* margin-top: -8px; */
}
100% {
height: 10px; /* 结束高度 */
/* margin-top: -6px; */
}
}
const soundList = this.data.soundList;
// 设置当前音频为关闭状态
soundList[index].isOpen = true;
this.setData({
isPlay: true,
soundList: soundList, // 更新 soundList
}, () => {
console.log('Updated soundList:', this.data.soundList); // 确认更新
console.log(' ',this.data.soundList[index].isOpen);
});
});
我在使用moving-bar时，单个动画可以实现。放到list里不可行。所有item要么执行动画，要么都不执行。isOpen的值变化在单个item里不执行动画。怎么回事
