mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
fix(item-sliding): prevent scrolling during slide gesture (#23774)
resolves #19564
This commit is contained in:
@ -104,7 +104,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
|
||||
[mode]: true,
|
||||
'item-option-disabled': disabled,
|
||||
'item-option-expandable': expandable,
|
||||
'ion-activatable': true,
|
||||
'ion-activatable': true
|
||||
})}
|
||||
>
|
||||
<TagType
|
||||
|
@ -43,6 +43,8 @@ export class ItemSliding implements ComponentInterface {
|
||||
private rightOptions?: HTMLIonItemOptionsElement;
|
||||
private optsDirty = true;
|
||||
private gesture?: Gesture;
|
||||
private closestContent: HTMLIonContentElement | null = null;
|
||||
private initialContentScrollY = true;
|
||||
|
||||
@Element() el!: HTMLIonItemSlidingElement;
|
||||
|
||||
@ -66,6 +68,8 @@ export class ItemSliding implements ComponentInterface {
|
||||
|
||||
async connectedCallback() {
|
||||
this.item = this.el.querySelector('ion-item');
|
||||
this.closestContent = this.el.closest('ion-content');
|
||||
|
||||
await this.updateOptions();
|
||||
|
||||
this.gesture = (await import('../../utils/gesture')).createGesture({
|
||||
@ -252,7 +256,23 @@ export class ItemSliding implements ComponentInterface {
|
||||
return !!(this.rightOptions || this.leftOptions);
|
||||
}
|
||||
|
||||
private disableContentScrollY() {
|
||||
if (this.closestContent === null) { return }
|
||||
|
||||
this.initialContentScrollY = this.closestContent.scrollY;
|
||||
this.closestContent.scrollY = false;
|
||||
}
|
||||
|
||||
private restoreContentScrollY() {
|
||||
if (this.closestContent === null) { return }
|
||||
|
||||
this.closestContent.scrollY = this.initialContentScrollY;
|
||||
}
|
||||
|
||||
private onStart() {
|
||||
// Prevent scrolling during gesture
|
||||
this.disableContentScrollY();
|
||||
|
||||
openSlidingItem = this.el;
|
||||
|
||||
if (this.tmr !== undefined) {
|
||||
@ -297,6 +317,9 @@ export class ItemSliding implements ComponentInterface {
|
||||
}
|
||||
|
||||
private onEnd(gesture: GestureDetail) {
|
||||
// Restore ion-content scrollY to initial value when gesture ends
|
||||
this.restoreContentScrollY();
|
||||
|
||||
const velocity = gesture.velocityX;
|
||||
|
||||
let restingPoint = (this.openAmount > 0)
|
||||
|
Reference in New Issue
Block a user