输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
FAQ
FAQ应用框架开发UI框架组件使用如何将ListItem的swipeAction滑动效果恢复到初始状态

如何将ListItem的swipeAction滑动效果恢复到初始状态

更新时间: 2026-06-26 07:47

使用 ListScroller 提供的 closeAllSwipeActions() 方法恢复滑动效果，示例代码如下：

收起
自动换行
深色代码主题
复制
  1. @Component
  2. export struct SwiperActionRecover {
  3.   @State arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  4.   private scrollerForList: ListScroller = new ListScroller();
  5. 

  6.   @Builder
  7.   itemEnd() {
  8.     Row() {
  9.       Button('Delete')
  10.       Button('Set')
  11.         .onClick(() => {
  12.           this.scrollerForList.closeAllSwipeActions(); // This is the key line of code
  13.         })
  14.     }
  15.     .justifyContent(FlexAlign.SpaceEvenly)
  16.   }
  17. 

  18.   build() {
  19.     Column() {
  20.       List({ space: 5, scroller: this.scrollerForList }) {
  21.         ForEach(this.arr, (item: number) => {
  22.           ListItem() {
  23.             Text('item' + item)
  24.               .width('100%')
  25.               .height(100)
  26.               .textAlign(TextAlign.Center)
  27.               .borderRadius(10)
  28.               .backgroundColor(0xFFFFFF)
  29.           }
  30.           .transition({
  31.             type: TransitionType.Delete,
  32.             opacity: 0
  33.           })
  34.           .swipeAction({
  35.             end: {
  36.               builder: () => {
  37.                 this.itemEnd();
  38.               },
  39.               onAction: () => {
  40.                 this.getUIContext().animateTo({ duration: 1000 }, () => {
  41.                   let index = this.arr.indexOf(item);
  42.                   this.arr.splice(index, 1);
  43.                 });
  44.               },
  45.               actionAreaDistance: 56
  46.             }
  47.           })
  48.         }, (item: string) => item)
  49.       }
  50.     }
  51.     .padding(20)
  52.     .backgroundColor(0xDCDCDC)
  53.     .width('100%')
  54.     .height('100%')
  55.   }
  56. }
如何实现List内拖拽交换子组件位置
自定义键盘和系统键盘如何切换
相关推荐
文档关于ListItem中swipeAction使用问题合集
文档如何设置List组件滑动到边缘无回弹效果
文档ListItem如何实现左滑删除功能
文档Slider交互与动画控制
文档Swiper滑动控制视频暂停播放
文档返回阅读列表顶部
文档返回顶部按钮功能异常
文档Swiper组件禁止手动滑动
文档如何使用List组件实现流畅的无限下拉滑动效果
文档List的下拉加载如何回滚到当前展示位置
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 FAQ 中进行搜索
请输入您想要搜索的关键词