mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
fix(menu): fix scrolling page w/ side menus
Improved which angles should allow the side menu to open, depending if it’s a left or right menu. Also check if the distance of the drag is longer than a side menu would get. For example, scrolling vertically for a long ways would have a long distance, but triggering a side menu to open would be a short distance. Also ensure that a side menu can always be closed incase something goes wrong. Closes #5272
This commit is contained in:
@@ -64,8 +64,8 @@ class E2EApp {
|
||||
console.log('onMenuOpening', ev);
|
||||
}
|
||||
|
||||
isHidden() {
|
||||
isChangeDetecting() {
|
||||
console.log('Change detection', ++this.changeDetectionCount);
|
||||
return false;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-menu [content]="content" id="leftMenu" side="left" (opening)="onMenuOpening($event)">
|
||||
<ion-menu [content]="content" id="leftMenu" side="left">
|
||||
|
||||
<ion-toolbar secondary>
|
||||
<ion-title>Left Menu</ion-title>
|
||||
@@ -12,7 +12,51 @@
|
||||
{{p.title}}
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="leftMenu" detail-none [hidden]="isHidden()">
|
||||
<button ion-item menuClose="leftMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="leftMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="leftMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="leftMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="leftMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="leftMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="leftMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="leftMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="leftMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="leftMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="leftMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="leftMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
@@ -40,9 +84,60 @@
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="rightMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="rightMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="rightMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="rightMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="rightMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="rightMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="rightMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="rightMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="rightMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="rightMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="rightMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
<button ion-item menuClose="rightMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
</ion-list>
|
||||
|
||||
</ion-content>
|
||||
|
||||
</ion-menu>
|
||||
|
||||
<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>
|
||||
|
||||
<div [hidden]="isChangeDetecting()"></div>
|
||||
@@ -51,4 +51,6 @@
|
||||
<button (click)="presentAlert()">Open alert</button>
|
||||
</p>
|
||||
|
||||
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
|
||||
|
||||
</ion-content>
|
||||
|
||||
Reference in New Issue
Block a user