wx:for循环渲染的组件如何加入动画？
发布于 5 年前 作者 xiaochao 7788 次浏览 来自 问答

在开发的小程序中，有个需求是在名片列表里点中某一个，那个名片就会有个移动的动画，而这些名片是通过wx:for循环渲染的view组件，如果直接在view组件上加上动画属性的绑定，然后使用setData来更新的话，则会造成所有名片的view都同时执行这个动画。小程序里对ui和js逻辑的隔离非常彻底，都是机遇数据驱动ui，发现无从下手，请问下应该如何实现呢？

4 回复

解决了，比较蹩脚。思路是使用独立一个动画的数组，然后在循环渲染的时候通过index逐个绑定给动态的view组件，然后点击某一个触发动画时独立修改这个索引的动画模型，再通过setData更新整个动画数组。虽然比较蹩脚的实现，但总归能用，希望有比较优雅的实现的老铁能更正指点下。

@大胡子

楼主您好，我也遇到用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,
    });
  }

@简单就不复杂  用setData的方法只能整个数组更新，势必就造成整个列表都重新渲染，这样很多界面本身的状态就丢失了。

这个问题我遇到过，就是数组数据遍历的问题。试过用二维数组来弄，要用到wx:if 但是没有弄成功。block for 层次弄的还不是很清楚。

回到顶部