小程序
小游戏
企业微信
微信支付
扫描小程序码分享
在开发的小程序中，有个需求是在名片列表里点中某一个，那个名片就会有个移动的动画，而这些名片是通过wx:for循环渲染的view组件，如果直接在view组件上加上动画属性的绑定，然后使用setData来更新的话，则会造成所有名片的view都同时执行这个动画。小程序里对ui和js逻辑的隔离非常彻底，都是机遇数据驱动ui，发现无从下手，请问下应该如何实现呢？
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
@大胡子
楼主您好，我也遇到用wx:for创建的组件时，为其添加动画的问题了。我也用数组存储组件的动画，但是setData之后，组件并没有执行动画。以下是我的代码，您方便的话，看一下哪里写的有问题，谢谢。
wxml中创建组件的代码：
<
view
style
=
"width:500rpx;height:500rpx;position:absolute;"
>
class
'div'
wx:for
"{{board}}"
wx:for-index
"idx"
wx:for-item
"item"
animation
"{{animationArr[idx]}}"
"background:red;height:100rpx;width:100rpx;left:{{pos[idx].left}}rpx;top:{{pos[idx].top}}rpx;position:absolute;"
>{{item}}</
</
js中的代码：
data: {
board:[],
pos:[],
animationArr:[],
},
onLoad:
function
() {
//最终的board
this
.board = [];
//每个框的绝对坐标
.pos = [];
//动画数组
.animationArr = [];
for
(let i=0;i<16;++i){
.board.push(0);
let k = parseInt(i/4);
let j = i%4;
let pos =
.getPosition(k,j);
.pos.push(pos);
let animation = wx.createAnimation({
duration: 200,
timingFunction:
'ease'
,
});
animation.rotate(30);
.animationArr.push(animation);
};
.setData({
board:
.board,
pos:
.pos,
animationArr:
.animationArr,
}
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
解决了，比较蹩脚。思路是使用独立一个动画的数组，然后在循环渲染的时候通过index逐个绑定给动态的view组件，然后点击某一个触发动画时独立修改这个索引的动画模型，再通过setData更新整个动画数组。虽然比较蹩脚的实现，但总归能用，希望有比较优雅的实现的老铁能更正指点下。
@简单就不复杂 用setData的方法只能整个数组更新，势必就造成整个列表都重新渲染，这样很多界面本身的状态就丢失了。
这个问题我遇到过，就是数组数据遍历的问题。试过用二维数组来弄，要用到wx:if 但是没有弄成功。block for 层次弄的还不是很清楚。
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
@大胡子
楼主您好，我也遇到用wx:for创建的组件时，为其添加动画的问题了。我也用数组存储组件的动画，但是setData之后，组件并没有执行动画。以下是我的代码，您方便的话，看一下哪里写的有问题，谢谢。
wxml中创建组件的代码：
<viewstyle="width:500rpx;height:500rpx;position:absolute;"><viewclass='div'wx:for="{{board}}"wx:for-index="idx"wx:for-item="item"><viewanimation="{{animationArr[idx]}}"style="background:red;height:100rpx;width:100rpx;left:{{pos[idx].left}}rpx;top:{{pos[idx].top}}rpx;position:absolute;"><view>{{item}}</view></view></view></view>js中的代码：
data: {board:[],pos:[],animationArr:[],},onLoad:function() {//最终的boardthis.board = [];//每个框的绝对坐标this.pos = [];//动画数组this.animationArr = [];for(let i=0;i<16;++i){this.board.push(0);let k = parseInt(i/4);let j = i%4;let pos =this.getPosition(k,j);this.pos.push(pos);let animation = wx.createAnimation({duration: 200,timingFunction:'ease',});animation.rotate(30);this.animationArr.push(animation);};this.setData({board:this.board,pos:this.pos,animationArr:this.animationArr,});}解决了，比较蹩脚。思路是使用独立一个动画的数组，然后在循环渲染的时候通过index逐个绑定给动态的view组件，然后点击某一个触发动画时独立修改这个索引的动画模型，再通过setData更新整个动画数组。虽然比较蹩脚的实现，但总归能用，希望有比较优雅的实现的老铁能更正指点下。
@简单就不复杂 用setData的方法只能整个数组更新，势必就造成整个列表都重新渲染，这样很多界面本身的状态就丢失了。
这个问题我遇到过，就是数组数据遍历的问题。试过用二维数组来弄，要用到wx:if 但是没有弄成功。block for 层次弄的还不是很清楚。