CODEWITHSUNDEEP
vue.jsionic-frameworkvue-router
Iker Vázquez
Iker Vázquez

Reputation: 567

Prevent swipe back on IOS ionic 5 Vue app

I have done it before with Ionic Angular for the entire app with:

IonicModule.forRoot({ swipeBackEnabled: false })

Or for a single page by injecting IonRouterOutlet:

this.routerOutlet.swipeGesture = true;

However, how can I perform this on an Ionic Vue app?

I disable global swiping with:

app.use(IonicVue, {swipeBackEnabled: false})

But if I import IonRouterOutlet on the page, it has no swipeGesture property, and I can't figure how to disable this option on a single page.

Upvotes: 2

Views: 2852

Answers (3)

Denis Grushak
Denis Grushak

Reputation: 400

Phil0xFF thanks for your solution.

I created the v-disable-swipe-back directive based on your decision

Enjoy your use)

  1. npm i v-disable-swipe-back

  2. <ion-page v-disable-swipe-back>

Upvotes: 2

Phil0xFF
Phil0xFF

Reputation: 31

iOS Only: I have found a working but not beautiful approach.
First you import the createGesture function from @ionic/vue.

import { createGesture } from '@ionic/vue';

Then the standard swipe back gesture must be overwritten in the ionViewWillEnter.

const gesture = createGesture({
  el: document.getElementById('test'),
  threshold: 0,
  gestureName: 'goback-swipe',
  gesturePriority: 40.5, // priority of swipe to go back is 40
  onMove: ev => console.log(ev)
});
gesture.enable(true);

Then give the ion-page object an ID and apply the gesture to it.

<ion-page id="test">

Upvotes: 3

saperlipopette
saperlipopette

Reputation: 1693

You can disable swipeGesture globally in your app by adding [swipeGesture]="false" to the ion-router-outlet in the App.vue file at the root of src :

<template>
  <ion-app>
    <Header />
    <ion-router-outlet [swipeGesture]="false" />
  </ion-app>
</template>

Upvotes: 2

Related Questions