javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): improve swipe to go back reliability (#22288)

Browse Source 
resolves #22237
This commit is contained in:
Liam DeBeasi
2020-10-12 11:32:28 -04:00
committed by GitHub
parent 16cf98ffbd
commit c74fd4147b
7 changed files with 149 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/vue/src/components/IonRouterOutlet.ts
View File

@ -10,14 +10,13 @@ import {
InjectionKey
} from 'vue';
import { AnimationBuilder } from '@ionic/core';
import { useRoute, useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { fireLifecycle, generateId, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '../utils';
let viewDepthKey: InjectionKey<0> = Symbol(0);
export const IonRouterOutlet = defineComponent({
name: 'IonRouterOutlet',
setup(_, { attrs }) {
const vueRouter = useRouter();
const route = useRoute();
const depth = inject(viewDepthKey, 0);
@ -57,13 +56,22 @@ export const IonRouterOutlet = defineComponent({
const canStart = () => {
const stack = viewStacks.getViewStack(id);
return stack && stack.length > 1;
if (!stack || stack.length <= 1) return false;
/**
* We only want to outlet of the entering view
* to respond to this gesture, so check
* to make sure the view is in the outlet we want.
*/
const routeInfo = ionRouter.getCurrentRouteInfo();
const enteringViewItem = viewStacks.findViewItemByRouteInfo({ pathname: routeInfo.pushedByRoute }, id);
return !!enteringViewItem;
}
const onStart = async () => {
const routeInfo = ionRouter.getCurrentRouteInfo();
const { routerAnimation } = routeInfo;
const items = viewStacks.getViewStack(id);
const enteringViewItem = items[items.length - 2];
const enteringViewItem = viewStacks.findViewItemByRouteInfo({ pathname: routeInfo.pushedByRoute }, id);
const leavingViewItem = viewStacks.findViewItemByRouteInfo(routeInfo, id);
if (leavingViewItem) {
@ -105,7 +113,23 @@ export const IonRouterOutlet = defineComponent({
const onEnd = (shouldContinue: boolean) => {
if (shouldContinue) {
skipTransition = true;
vueRouter.back();
/**
* Use the same logic as clicking
* ion-back-button to determine where
* to go back to.
*/
ionRouter.handleNavigateBack();
} else {
/**
* In the event that the swipe
* gesture was aborted, we should
* re-hide the page that was going to enter.
*/
const routeInfo = ionRouter.getCurrentRouteInfo();
const enteringViewItem = viewStacks.findViewItemByRouteInfo({ pathname: routeInfo.pushedByRoute }, id);
enteringViewItem.ionPageElement.setAttribute('aria-hidden', 'true');
enteringViewItem.ionPageElement.classList.add('ion-page-hidden');
}
}