Where can I control the page swipes and Android back button functionality?

Questions
1

I’d like to prevent the ability to swipe back on certain pages. I don’t mean a swiper slider I mean just dragging the app page from left to right in order to go back.

I use the index page as a kind of splash / loading page and I want to prevent the user from being able to go back to this page once the app navigates to the first page.

Also, how can I use the android back button for this history? Is this possible through Framework 7 or does it need a Cordova plugin?

2

You can add “no-swipeback” class to required page to prevent swipe back on it. As for Android back button, just search on forum, there are plenty solutions here.

1 Like
3

Thanks.
Is there also a way to force the previous page to reload if it is swiped back. The equvelant of using the following on a link ?:

data-force="true" data-ignore-cache="true"
4

I think you can reload it in pageAfterIn callback for that previous page

5

So I decided to just pick out and update certain elements on the page that need updating when swiped back… But is there a way to detect if the page was swiped back to? Something like :

methods: {
  updateStuff: fucntion () {
  }
},
on: {
  pageAfterIn: function () {
    const self = this;
    if (self.wasSwipedBack) self.updateStuff();
  },
}
6

Check page data http://framework7.io/docs/page.html#page-data it has direction which will be “backward” in case it comes from previous page

7

Thanks. I think I figured it out a different way :

return {
  data: function () {
  },
  methods: {
    updateStuff: function() {
      // Update stuff after swipe back
    },
    onSwipebackAfterChange: function () {
      const self = this;
      self.updateStuff();
    },
  }
  created: function() {
    const self = this, app = self.$app;
    app.on('swipebackAfterChange', self.onSwipebackAfterChange);
  },
  beforeDestroy: function() {
    const self = this, app = self.$app;
    app.off('swipebackAfterChange', self.onSwipebackAfterChange);
  }
}