Prevent swipe back on IOS ionic 5 Vue app

user_1376503 0
Viewed 1472

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.

vue-router ionic-framework vue.js
3 Answers

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">
user_131470660

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>
user_76898960

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>

user_106687130
Related