我想使用本機事件和 rxjs 在有角度的頁面之間滑動。我發現了這一點并更改了我的代碼以使用 rxjs：
ngAfterViewInit(): void {
fromEvent<TouchEvent>(document, 'touchstart')
.pipe(
switchMap(() =>
fromEvent<TouchEvent>(document, 'touchmove').pipe(
takeUntil(fromEvent(document, 'touchend')),
pairwise()
)
)
)
.subscribe(([touchstartEvent, touchendEvent]) => {
const xDiff =
touchstartEvent.touches[0].clientX - touchendEvent.touches[0].clientX;
console.log(xDiff);
if (Math.abs(xDiff) < 0.3 * document.body.clientWidth) {
return;
}
if (xDiff > 0) {
console.log('right swipe');
} else {
console.log('left swipe');
}
});
}
然而，我在訂閱中的函式被多次呼叫，這意味著我的滑動永遠不會執行，因為我的閾值0.3 * document.body.clientWidth從未達到。為了除錯，我添加了以下代碼：
fromEvent(document, 'touchend').subscribe((e) => {
console.log('test2');
});
然后我的控制臺輸出是這樣的，顯示takeUntil沒有按預期作業：
test -24.941162109375
test -8
test -9.41180419921875
test -8.4705810546875
test -9.88232421875
test2
我在這里想念什么？
uj5u.com熱心網友回復：
這里運算子的使用pairwise()是錯誤的。根據您的預期排放量[touchstartEvent, touchendEvent]，pairwise()它沒有做您認為它正在做的事情。發出的實際值是[touchmove[0], touchmove[1]].
我建議以下
使用
zipWith運算子合touchstart并touchend并忽略touchmove它的值是否不需要。在訂閱回呼中使用
return來停止進一步的執行對我來說看起來并不優雅。您可以改為翻轉if陳述句的條件。
ngAfterViewInit(): void {
fromEvent<TouchEvent>(document, 'touchstart')
.pipe(zipWith(fromEvent<TouchEvent>(document, 'touchend')))
.subscribe({
next: ([touchstartEvent, touchendEvent]) => {
const xDiff =
touchstartEvent.touches[0].clientX - touchendEvent.touches[0].clientX;
console.log(xDiff);
if (Math.abs(xDiff) > 0.3 * document.body.clientWidth) {
if (xDiff > 0) {
console.log('right swipe');
} else {
console.log('left swipe');
}
}
}
});
}
作業示例（觸摸事件替換為滑鼠事件）：Stackblitz
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/421751.html
標籤：
上一篇：VSCodeEslint錯誤no-unsafe-assignment顯示不正確
下一篇：AngularHHTP請求的條件