2025-05-22 18:58:14 +08:00
|
|
|
@Component
|
|
|
|
|
export struct SwipeView {
|
2025-05-22 19:08:04 +08:00
|
|
|
private _scroller: Scroller = new Scroller()
|
2025-05-22 18:58:14 +08:00
|
|
|
@State h: Length = 40
|
2025-05-22 19:08:04 +08:00
|
|
|
@State downX: number = 0
|
2025-05-22 19:13:08 +08:00
|
|
|
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() {
|
2025-05-22 19:08:04 +08:00
|
|
|
Scroll(this._scroller) {
|
2025-05-22 18:58:14 +08:00
|
|
|
Row() {
|
2025-05-22 19:13:08 +08:00
|
|
|
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)
|
2025-05-22 19:13:08 +08:00
|
|
|
.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 19:08:04 +08:00
|
|
|
|
2025-05-22 18:58:14 +08:00
|
|
|
}.width('100%').scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)
|
2025-05-22 19:08:04 +08:00
|
|
|
.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
|
|
|
|
|
}
|
|
|
|
|
// 滑动指定位置,设置动画
|
2025-05-22 19:13:08 +08:00
|
|
|
this._scroller.scrollTo({
|
|
|
|
|
xOffset: toxOffset, yOffset: 0,
|
|
|
|
|
animation: { duration: 300, curve: Curve.Linear }
|
|
|
|
|
})
|
2025-05-22 19:08:04 +08:00
|
|
|
// 重置按下的x轴坐标
|
|
|
|
|
this.downX = 0
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
})
|
2025-05-22 18:58:14 +08:00
|
|
|
}
|
|
|
|
|
}
|