小程序
小游戏
企业微信
微信支付
扫描小程序码分享
在开发的小程序中,有个需求是在名片列表里点中某一个,那个名片就会有个移动的动画,而这些名片是通过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中创建组件的代码:
<
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 层次弄的还不是很清楚。