转场动画forEach循环添加回调函数添加index为啥全部触发了?
/**
* 转场动画(组件)transition
* 需要配合animateTo才能生效
*
*/
@Entry
@Component
struct TransitionTest2 {
@State numbers: Object[] = []
startNumber: number = 6;
build() {
Column({ space: 10 }) {
Scroll() {
Column({ space: 10 }) {
ForEach(this.numbers, (item,index) => {
// ForEach下的直接组件需配置transition效果
Row() {
Text(item.text + item.id)
.height(40)
.backgroundColor(Color.Orange).layoutWeight(1)
// Button('删除').type(ButtonType.Normal).onClick(()=>{
// animateTo({},()=>{
// this.numbers.splice(index,1)
// })
// })
}
.transition({ type: TransitionType.All, translate: { x: 200 }, scale: { x: 0, y: 0 } })
}, item => item.id)
}
.margin(10)
// .justifyContent(FlexAlign.Start)
// .alignItems(HorizontalAlign.Center)
.width("90%").height('100%')
}.layoutWeight(1).backgroundColor(Color.Green)
Row(){
Button('头部添加')
.onClick(() => {
animateTo({ duration: 1000 }, () => {
// 往数组头部插入一个元素,导致ForEach在头部增加对应的组件
this.numbers.unshift({ text: '文档', id: this.startNumber.toString() });
this.startNumber++;
})
})
Button('尾部添加')
.onClick(() => {
animateTo({ duration: 1000 }, () => {
// 往数组尾部插入一个元素,导致ForEach在尾部增加对应的组件
this.numbers.push({ text: '文档', id: this.startNumber.toString() });
this.startNumber++;
})
})
Button('删除头部')
.onClick(() => {
animateTo({ duration: 1000 }, () => {
// 删除数组的头部元素,导致ForEach删除头部的组件
this.numbers.shift();
})
})
Button('删除尾部')
.onClick(() => {
animateTo({ duration: 1000 }, () => {
// 删除数组的尾部元素,导致ForEach删除尾部的组件
this.numbers.pop();
})
})
}
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
}
}
UI
forEach循环
赞
收藏 0
回答 1
待解决
相关问题
求告知子窗口如何添加动画
321浏览 • 1回复 待解决
#鸿蒙学习大百科#如何监听RichEditor添加完成粘贴前可触发的回调?
140浏览 • 1回复 待解决
#鸿蒙学习大百科#如何监听RichEditor添加完成复制前可触发的回调?
155浏览 • 1回复 待解决
#鸿蒙学习大百科#如何监听RichEditor添加完成剪切前可触发的回调?
113浏览 • 1回复 待解决
鸿蒙卡片添加到桌面会触发哪个方法呢?
6249浏览 • 1回复 待解决
服务中心添加卡片怎么添加?
6311浏览 • 1回复 待解决
如何实现动画转场效果
769浏览 • 1回复 待解决
ForEach无法遍历全部数据,是什么原因
1823浏览 • 1回复 待解决
如何添加内容的添加渐变模糊
246浏览 • 1回复 待解决
使用转场动画时,如何在消失转场动画完成时执行其他操作
2007浏览 • 1回复 待解决
如何全局设置页面转场动画
657浏览 • 1回复 待解决
Tabs 出现/消失转场动画效果
276浏览 • 1回复 待解决
#鸿蒙学习大百科#如何监听RichEditor添加图文变化前和图文变化后可触发的回调?
152浏览 • 1回复 待解决
复杂类型foreach循环,关于复杂类型的循环渲染有哪些?
635浏览 • 1回复 待解决
HarmonyO foreach循环,数据变化了,界面没有刷新
124浏览 • 1回复 待解决
TransitionEffect动画循环播放如何关闭
1755浏览 • 1回复 待解决
list添加或删除item需要设置入场出场动画典型案例
791浏览 • 1回复 待解决
ArkUI转场动画可以改颜色吗?
1820浏览 • 1回复 待解决
HarmonyOS 页面内的组件转场动画
237浏览 • 1回复 待解决
鸿蒙工程可以添加.so 文件吗?怎么添加?
2711浏览 • 1回复 待解决
buttom样式怎么添加?
6384浏览 • 2回复 待解决
HarmonyOS 卡片添加问题
308浏览 • 1回复 待解决
添加候选网络配置,使用有关能力接口添加候选网络配置
707浏览 • 1回复 待解决
ForEach循环渲染的过程是什么样的
717浏览 • 1回复 待解决
forEach循环中,编译报错:Not all code paths return a value
756浏览 • 1回复 待解决
没太看明白问题是什么