diff --git a/src/main/ets/view/SwipeView.ets b/src/main/ets/view/SwipeView.ets index c5d9b1b..cf2b96d 100644 --- a/src/main/ets/view/SwipeView.ets +++ b/src/main/ets/view/SwipeView.ets @@ -1,6 +1,8 @@ @Component export struct SwipeView { + private _scroller: Scroller = new Scroller() @State h: Length = 40 + @State downX: number = 0 @Builder doNothingBuilder() { @@ -11,7 +13,7 @@ export struct SwipeView { // @BuilderParam btnBuilder: () => void = this.doNothingBuilder build() { - Scroll() { + Scroll(this._scroller) { Row() { this.customBuilderParam() Text('删除') @@ -30,6 +32,39 @@ export struct SwipeView { }.onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => { this.h = newValue.height ?? 40 }).alignItems(VerticalAlign.Center) + }.width('100%').scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off) + .onTouch((event: TouchEvent) => { // 触摸事件 + // 判断是否有打开删除组件,有则关闭 + + // 根据触摸类型判断 + switch (event.type) { + case TouchType.Down: // 触摸按下 + // 记录按下的x轴坐标 + this.downX = event.touches[0].x + break + case TouchType.Up: // 触摸抬起 + // 触摸抬起,根据x轴总偏移量,判断是否打开删除 + let xOffset = event.touches[0].x - this.downX + // 防止消费点击事件 + if (xOffset == 0) { + return + } + // 滑到x轴的位置 + let toxOffset = 0 + // 开启删除的对象置为null + // 偏移量超过删除按钮一半且左滑,设置打开 + if (Math.abs(xOffset) > 35 && xOffset < 0) { + // 删除布局宽度 + toxOffset = 70 + } + // 滑动指定位置,设置动画 + this._scroller.scrollTo({ xOffset: toxOffset, yOffset: 0, + animation: { duration: 300, curve: Curve.Linear } }) + // 重置按下的x轴坐标 + this.downX = 0 + break + } + }) } } \ No newline at end of file