收藏
回答

wx:for循环渲染的组件如何加入动画?

问题模块
API和组件

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

最后一次编辑于  2017-08-24  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

4 个回答

  • 田顺建
    田顺建
    2018-04-13

    @大胡子

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


    2018-04-13
    赞同
    回复
  • 小胡子
    小胡子
    2017-08-24

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

    2017-08-24
    赞同
    回复
  • 小胡子
    小胡子
    2017-08-24

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

    2017-08-24
    赞同
    回复
  • 简单就不复杂
    简单就不复杂
    2017-08-24

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

    2017-08-24
    赞同
    回复