HarmonyOS 鸿蒙Next list 插入元素时,会触发所有元素的进出场动画,有人遇到过嘛

发布于 1周前 作者 h691938207 来自 鸿蒙OS

HarmonyOS 鸿蒙Next list 插入元素时,会触发所有元素的进出场动画,有人遇到过嘛

List() { ForEach(this.todayListBill, (item: Bill, index: number) => { ListItem() { HomeItem({ item: item, }) } .width(‘100%’) .onClick(() => { AppStorage.setOrCreate(‘itemBillInfo’, new Bill(item.id, item.day, item.io, item.kind, item.money, item.remark, item.images, item.card, item.hideBill, item.aBook)) this.isOpenShowBill = true this.isOpenCard = true }) .clickEffect({ level: ClickEffectLevel.HEAVY, scale: 0.9 }) .height(56) .transition( TransitionEffect.asymmetric( TransitionEffect.translate({ x: this.isLeftHomeListMove ? someValue.windowsWidth : -someValue.windowsWidth, y: 0, }) .animation({ delay: 50 * index, curve: someValue.animationType }) .combine(TransitionEffect.opacity(0.2) .animation({ delay: 50 * index, curve: someValue.animationType })) , TransitionEffect.translate({ x: this.isLeftHomeListMove ? -someValue.windowsWidth : someValue.windowsWidth, y: 0 }).animation({ curve: someValue.animationType }) .combine(TransitionEffect.opacity(0.2) .animation({ curve: someValue.animationType })) ) ) }, (item: Bill) => item.id + item.kind + item.day + Date.now().toString(36))

} .width(‘100%’) .backgroundColor(this.isShowBgImage && this.isOpenBackGroundBlur && this.foreGroundBlur ? $r(‘app.color.menu_backGround’) : $r(‘app.color.backGround_second’)) .backgroundEffect(this.isShowBgImage && this.isOpenBackGroundBlur && this.foreGroundBlur ? { radius: this.foreGroundBlur } : undefined)

.divider({ strokeWidth: 0.5, color: $r(‘app.color.showDow’) }) .borderRadius(24)

if (item.day.includes(this.homeDate)) { this.todayListBill.push(item) }

push成功了,但是上面list 的所有元素都触发了进出场动画,正常嘛?


更多关于HarmonyOS 鸿蒙Next list 插入元素时,会触发所有元素的进出场动画,有人遇到过嘛的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
4 回复

这是因为你ListItem 组件设置的key导致的。(item: Bill) => item.id + item.kind + item.day + Date.now().toString(36)，Date.now().toString(36) 每次调用都会返回不同的结果。这就导致了每次渲染时，所有的元素都会被认为是新的，从而触发整个列表的进出场动画。改成 (item: Bill) => item.id + item.kind + item.day，但是前提要保证这样设置的key是唯一的。

更多关于HarmonyOS 鸿蒙Next list 插入元素时,会触发所有元素的进出场动画,有人遇到过嘛的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


用

onAttach 监测了发现新增,删除,更改元素,时,所有元素都会触发卸载加载,这不应该啊,应该只触发变动的元素才对啊

如何只触发变更的那个元素的动画

针对HarmonyOS鸿蒙系统中Next list插入元素时触发所有元素进出场动画的问题，这通常是由于列表的刷新机制或动画配置不当导致的。

在鸿蒙系统中，Next list组件可能默认在数据变化时对所有元素进行重新渲染或动画处理。如果希望在插入新元素时仅对新元素应用动画，而保持其他元素静止，可以尝试以下方法：

  1. 检查动画配置：确保没有全局动画设置影响到列表的每一项。在列表项的数据绑定或样式定义中，检查是否有动画属性被错误地应用到所有元素上。

  2. 优化数据更新逻辑：在插入新元素时，尽量只更新受影响的部分，而不是整个列表的数据。这可以通过局部刷新或数据差分算法来实现。

  3. 使用条件渲染：对于需要动画效果的元素，可以使用条件渲染来控制动画的触发。例如，只有在新元素插入时才显示动画效果。

如果上述方法仍然无法解决问题，可能是鸿蒙系统内部的实现细节或已知问题。此时，建议直接联系鸿蒙系统的官方客服或技术支持团队，以获取更具体的解决方案。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部