HarmonyOSBaseLibs/src/main/ets/view/SwipeView.ets

90 行
2.7 KiB
Plaintext

2025-05-22 18:58:14 +08:00
@Component
export struct SwipeView {
private _scroller: Scroller = new Scroller()
2025-05-22 18:58:14 +08:00
@State h: Length = 40
@State downX: number = 0
onItemClick?: () => void
onDelete?: () => void
2025-05-22 18:58:14 +08:00
@Builder
doNothingBuilder() {
}
@BuilderParam customBuilderParam: () => void = this.doNothingBuilder
// @BuilderParam btnBuilder: () => void = this.doNothingBuilder
build() {
Scroll(this._scroller) {
2025-05-22 18:58:14 +08:00
Row() {
Column() {
this.customBuilderParam()
}.width('100%').onClick(() => {
this._scroller.scrollTo({
xOffset: 0, yOffset: 0,
animation: { duration: 100, curve: Curve.Linear }
})
this.onItemClick && this.onItemClick()
})
2025-05-22 18:58:14 +08:00
Text('删除')
.backgroundColor('red')
.width(70)
.fontColor('white')
.height(this.h)
.textAlign(TextAlign.Center)
.fontSize(16)
.onClick(() => {
this._scroller.scrollTo({
xOffset: 0, yOffset: 0,
animation: { duration: 100, curve: Curve.Linear }
})
this.onDelete && this.onDelete()
})
2025-05-22 18:58:14 +08:00
// if (this.btnBuilder === this.doNothingBuilder) {
// Text('删除')
// }
// if (this.btnBuilder !== this.doNothingBuilder) {
// this.btnBuilder()
// }
}.onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
this.h = newValue.height ?? 40
}).alignItems(VerticalAlign.Center)
2025-05-22 18:58:14 +08:00
}.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
}
})
2025-05-22 18:58:14 +08:00
}
}