【鸿蒙实战开发】HarmonyOS基于滚动组件的手势处理

代码改变世界996

于 2024-08-06 08:45:00 发布

阅读量631

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端鸿蒙安卓文章标签： harmonyos 华为 android 鸿蒙前端

本文链接：https://blog.youkuaiyun.com/HarmonyOS007/article/details/140936399

场景一：实现左滑阻尼效果

效果图

方案

在List组件上绑定滑动手势，在List里面最后一个ListItem内部放入Ellipse和Text组件，在滑动手势onActionUpdate回调里控制ListItemGroup组件的offset属性left参数和Ellipse的宽度达到左滑阻尼的效果。

核心代码

List({ initialIndex: 0, scroller: this.scroller }) { 
  ListItemGroup({ space: 20 }) { 
    ForEach(this.arr, (item: number) => { 
      ListItem() { 
        Text('' + item) 
          .width(80) 
          .height(100) 
          .fontSize(16) 
          .textAlign(TextAlign.Center) 
          .borderRadius(10) 
          .backgroundColor(0xFFFFFF) 
      } 
    }, (item: string) => item) 
  } 
  .offset({ left: this.offsetLeft }) 

  ListItem() { 
    this.itemEnd() 
  } 
} 
.width('100%') 
.height(120) 
.scrollBar(BarState.Off) 
.listDirection(Axi