右滑删除动画 HarmonyOS 鸿蒙Next

右滑删除动画 HarmonyOS 鸿蒙Next

这种动画用v2状态管理怎么实现（QQ右滑删除）删除下面内容把删除的列表覆盖


更多关于右滑删除动画 HarmonyOS 鸿蒙Next的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

参考以下代码：

@Entry
@ComponentV2
struct Index {
  @Local conversations: string[] = ['公众号', '订阅号', '服务通知', '游戏中心'];

  build() {
    Column() {
      this.ListComponent()
    }
    .height('100%')
    .width('100%')
  }

  @Builder
  ListComponent() {
    Flex({ direction: FlexDirection.Column }) {

      List() {
        ForEach(this.conversations, (item: string, index: number) {
          ListItem() {
            Text(item)
          }
          .swipeAction({ end: this.ItemDelete(item) })// 左滑删除
          .height(60)
          .width('90%')
          .margin({left: 20})
        }, (item: string, index: number) => index + JSON.stringify(item))
      }
      .width('100%')
      .height('100%')
      .margin({top: 60})
    }
    .height('100%')
    .width('100%')
  }

  @Builder
  ItemDelete(data: string) {
    Flex({
      direction: FlexDirection.Column,
      justifyContent: FlexAlign.Center,
      alignItems: ItemAlign.End
    }) {
      Column() {
        Text('delete')
          .fontColor(Color.White)
      }
    }
    .onClick(() => {
      if (this.conversations.indexOf(data) > -1) {
        this.conversations.splice(this.conversations.indexOf(data), 1)
      }
    })
    .width(80)
    .backgroundColor(Color.Red)
    .margin({ left: -24 })
  }
}

更多关于右滑删除动画 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


基本信息

  • 姓名: 张三
  • 年龄: 28
  • 职位: 软件工程师
  • 地址: 北京市

动画指的是哪个动画？

我发的GIF图片上那种，一模一样的（参考QQ），

期待HarmonyOS能在未来推出更多针对企业用户的解决方案。

ListItem加上

```scss
.transition(TransitionEffect.SLIDE)

删除按钮点击事件

animateTo({
  duration: 200,
  curve: Curve.Linear
}, () => {
  this.list?.splice(findIndex, 1)
})

在HarmonyOS（鸿蒙Next）中，实现右滑删除动画可以通过使用SwipeToDeleteContainer组件。该组件提供了默认的右滑删除效果，开发者可以直接使用或自定义动画效果。具体步骤如下：

  1. 引入组件：在布局文件中引入SwipeToDeleteContainer组件。
  2. 配置子项：将需要右滑删除的列表项作为SwipeToDeleteContainer的子项。
  3. 设置删除操作：通过onDelete回调函数处理删除逻辑。

示例代码：

<SwipeToDeleteContainer
    ohos:id="$+id:swipe_container"
    ohos:width="match_parent"
    ohos:height="match_content"
    onDelete="onDeleteItem">
    <ListContainer
        ohos:id="$+id:list_container"
        ohos:width="match_parent"
        ohos:height="match_content">
        <!-- 列表项内容 -->
    </ListContainer>
</SwipeToDeleteContainer>

在代码中实现onDeleteItem方法：

private void onDeleteItem(int position) {
    // 处理删除逻辑
}

通过这种方式，可以在HarmonyOS中实现右滑删除动画效果。

回到顶部