我爱小程序
| 问题模块 |
|---|
| API和组件 |
在开发的小程序中，有个需求是在名片列表里点中某一个，那个名片就会有个移动的动画，而这些名片是通过wx:for循环渲染的view组件，如果直接在view组件上加上动画属性的绑定，然后使用setData来更新的话，则会造成所有名片的view都同时执行这个动画。小程序里对ui和js逻辑的隔离非常彻底，都是机遇数据驱动ui，发现无从下手，请问下应该如何实现呢？
网友回复
田顺建：
@大胡子
楼主您好，我也遇到用wx:for创建的组件时，为其添加动画的问题了。我也用数组存储组件的动画，但是setData之后，组件并没有执行动画。以下是我的代码，您方便的话，看一下哪里写的有问题，谢谢。
wxml中创建组件的代码：
<view style="width:500rpx;height:500rpx;position:absolute;"> <view class='div' wx:for="{{board}}" wx:for-index="idx" wx:for-item="item"> <view animation="{{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 () { //最终的board this.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 层次弄的还不是很清楚。