基于滚动组件的手势处理

基于滚动组件的手势处理

HarmonyOS
2024-07-25 10:19:57
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
day_night

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

效果图

方案

在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) 
.backgroundColor(0xDCDCDC) 
.padding(10) 
.onReachEnd(() => { 
  this.isEnd = true 
  console.log('is end') 
}) 
.onScrollFrameBegin((offset: number) => { 
  console.log('offset', offset) 
  if (!this.scroller.isAtEnd()) { 
    this.isEnd = false 
  } 
  if (this.ellipseWidth > 0) { 
    return { offsetRemain: 0 } 
  } 
  return { offsetRemain: offset } 
}) 
.parallelGesture( 
  PanGesture({ direction: PanDirection.Horizontal, distance: 1 }) 
    .onActionStart(() => { 
      this.slidOffsetX = 0 
    }) 
    .onActionUpdate((event: GestureEvent) => { 
      if (event && this.isEnd) { 
        // 限制offsetLeft大于-60小于0 
        if (event.offsetX - this.slidOffsetX < -60) { 
          this.offsetLeft = -60 
        } else if (event.offsetX - this.slidOffsetX > 0) { 
          this.offsetLeft = 0 
        } else { 
          this.offsetLeft = event.offsetX - this.slidOffsetX 
        } 
        this.ellipseWidth = (-this.offsetLeft) / 1.5 
      } else { 
        // 已滑动的偏移量x保存下来,用于处理还未至底部就开始滑动的情况 
        this.slidOffsetX = event.offsetX 
      } 
    }) 
    .onActionEnd((event: GestureEvent) => { 
      console.info('Pan end') 
      this.offsetLeft = 0 
      this.ellipseWidth = 0 
      if (event.offsetX < 0) { 
        console.log('跳转') 
      } 
    }) 
)

场景二:左滑删除,类似点击弹出swipeAction的效果

效果图

方案

在ListItem组件上绑定滑动手势,在滑动手势onActionUpdate事件里控制ListItem的属性offset的参数x的值,在onActionEnd事件里判断当前左滑的偏移量控制是否拉出删除按钮,最后给ListItem绑定点击事件,使用animateTo展开删除按钮。

核心代码

ListItem() { 
  Row() { 
    Text('item' + this.item.num) 
      .width('100%') 
      .height(100) 
      .fontSize(16) 
      .textAlign(TextAlign.Center) 
      .borderRadius(10) 
      .backgroundColor(0xFFFFFF) 
    Row() { 
      Button('删除') 
    } 
    .width(120) 
    .justifyContent(FlexAlign.Center) 
  } 
} 
.offset({ x: this.item.offsetX }) 
.transition({ type: TransitionType.Delete, opacity: 0 }) 
.priorityGesture( 
  PanGesture({ direction: PanDirection.Horizontal, distance: 1 }) 
    .onActionUpdate((event: GestureEvent) => { 
      if (this.item.isDelShow) { 
        // 删除按钮显示状态 
        if (-120 + event.offsetX < -120) { 
          this.item.offsetX = -120 
        } else if (-120 + event.offsetX > 0) { 
          this.item.offsetX = 0 
        } else { 
          this.item.offsetX = -120 + event.offsetX 
        } 
      } else { 
        // 删除按钮未显示状态 
        if (event.offsetX < -120) { 
          this.item.offsetX = -120 
        } else if (event.offsetX > 0) { 
          this.item.offsetX = 0 
        } else { 
          this.item.offsetX = event.offsetX 
        } 
      } 
    }) 
    .onActionEnd((_event: GestureEvent) => { 
      console.log('this.item.offsetX', this.item.offsetX) 
      if (this.item.offsetX > -60) { 
        animateTo({ 
          duration: 300, 
        }, () => { 
          this.item.offsetX = 0 
          this.item.isDelShow = false 
        }) 
      } else { 
        animateTo({ 
          duration: 300, 
        }, () => { 
          this.item.offsetX = -120 
          this.item.isDelShow = true 
        }) 
      } 
    }) 
) 
.onClick(() => { 
  animateTo({ 
    duration: 300, 
  }, () => { 
    this.item.offsetX = -120 
    this.item.isDelShow = true 
  }) 
})
分享
微博
QQ
微信
回复
2024-07-25 18:37:49
相关问题
基于webView嵌套滚动
408浏览 • 1回复 待解决
基于ImageKit对图片进行处理
476浏览 • 1回复 待解决
基于原生能力组件封装
285浏览 • 1回复 待解决
如何获取List组件滚动滚动距离
2322浏览 • 1回复 待解决
基于Progress组件进度条
361浏览 • 1回复 待解决
Web组件如何开启手势缩放
1488浏览 • 1回复 待解决
HarmonyOS 如何从子组件控制手势分发
283浏览 • 1回复 待解决
HarmonyOS 如何隐藏Web组件滚动条?
292浏览 • 2回复 待解决
Swiper组件设置不跟随手势滑动
332浏览 • 1回复 待解决
Image组件如何实现双指手势放大
2180浏览 • 1回复 待解决
list组件无法滚动到底部
961浏览 • 1回复 待解决
HarmonyOS Scroll组件滚动问题
219浏览 • 1回复 待解决
HarmonyOS Tabs组件Tab栏滚动问题
248浏览 • 1回复 待解决