我们还遇到了两个事件都在 iOS 上触发的问题。
根据@GeorgeK 的回答，我将他的方法包装在一个服务中。
我还确保您可以使用项目标识符一次按下多个项目。我还为取消和移动操作添加了一个处理程序，以防止在滚动时选择项目：
touch-event.service.ts：
import { Injectable } from "@angular/core";
import { TouchGestureEventData } from "tns-core-modules/ui/gestures";
@Injectable({
providedIn: "root"
})
export class TouchEventService {
static longPressTimeout: number = 500;
private events: Map<string, number> = new Map<string, number>();
private startY: Map<string, number> = new Map<string, number>();
private startX: Map<string, number> = new Map<string, number>();
constructor() {
}
onTouch(args: TouchGestureEventData, id: string, item: any, itemTapCallback?: (item: any) => any, longPressCallback?: (item: any) => any) {
if (args.action === "down") {
// When someone starts pressing the element.
// Create a new timeout that will trigger the long press callback
// after longPressTimeout.
this.startX.set(id, args.getX());
this.startY.set(id, args.getY());
// @ts-ignore
this.events.set(id, setTimeout(() => {
this.clearItem(id);
longPressCallback(item);
}, TouchEventService.longPressTimeout));
} else if (args.action === "up" && this.events.has(id)) {
// When someone stops pressing the element.
// If we have an existing event, this means the long press did
// not trigger yet. Remove the timeout and trigger the tap callback.
clearTimeout(this.events.get(id));
this.clearItem(id);
itemTapCallback(item);
} else if (args.action === "cancel" && this.events.has(id)) {
// When someone moves away from the element while pressing.
// Prevents handlers to be called while scrolling.
clearTimeout(this.events.get(id));
this.clearItem(id);
} else if (args.action === "move" && this.events.has(id)) {
// When someone moves from the element while pressing.
// Prevents handlers to be called while scrolling.
// This is mainly for iOS because they do not trigger cancel
// when scrolling out of view. But also useful for large items.
const differenceX = Math.abs(args.getX() - this.startX.get(id));
const differenceY = Math.abs(args.getY() - this.startY.get(id));
if (differenceX > 30 || differenceY > 10) {
clearTimeout(this.events.get(id));
this.clearItem(id);
}
}
}
clearItem(id: string) {
this.events.delete(id);
this.startX.delete(id);
this.startY.delete(id);
}
}
这是一个如何在组件中实现它的示例：
example.component.ts
import { Component } from "@angular/core";
import { TouchEventService } from "./touch-event.service";
@Component({
selector: "Example",
templateUrl: "./example.component.html"
})
export class ExampleComponent {
private _itemTapHandler: (item: any) => any;
private _longPressHandler: (item: any) => any;
constructor(public touchEventService: TouchEventService) {
this._itemTapHandler = this.itemTapHandler();
this._longPressHandler = this.longPressHandler();
}
itemTapHandler(): (item: any) => any {
return (item) => {
return this.itemTap(item);
};
}
longPressHandler(): (item: any) => any {
return (item) => {
return this.longPress(item);
};
}
itemTap(item: any) {
// Handle the item tap here.
}
longPress(item: any) {
// Handle the long press here.
}
}
example.component.html
<StackLayout *ngFor="let item of items" (touch)="touchEventService.onTouch($event, item.id, item, _itemTapHandler, _longPressHandler)">
<!-- Your item content here, you can use the touch in anything, like list views and scroll views -->
</StackLayout>