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

最新推荐文章于 2025-01-17 15:56:56 发布

原创

最新推荐文章于 2025-01-17 15:56:56 发布 · 665 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #android #鸿蒙 #前端

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

效果图

方案

在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(Axis.Horizontal) 
.edgeEffect(EdgeEffect.None) 
.backg