Back button issue

1

Hi i need to enable back button such that when a user clicks the back button it does not quit the app, instead it returns to the last page.

base on this link i did this

in APP.JS
view: {
pushState :true,
},

ISSUE:
All routes navigation stops working

e.g view.router.navigate('/rider-login/');

What did i do wrong?

2

This may help.

3

Do i need to add this?

in APP.JS
view: {
pushState :true,
},

4

I didn’t use push state = true;
I think you don’t need it.

5

Where did you place your solution?

App.js

6

I put Outside page init. And after app init.

7

Please can you show a sample?

8

Complete example I use.

APP INIT

var app = new Framework7({
    // App root element
    root: '#app',
    // App Name
    name: 'Autofarma',
    // App id
    id: 'net.autofarma',
    // Enable swipe panel
    panel: {
        swipe: 'left',
    },
    statusbar: {
        androidBackgroundColor: '#003b56',
        androidTextColor: 'white',
    },
    // Add default routes
    routes: [
        {
            path: '/inicio/',
            url: 'index.html',
            name: 'inicio',
    },
       ...
  ],
    // ... other parameters
});

// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Dom7;

var mainView = app.views.create('.view-main');

BACK BUTTON CODE
Note that in the if statement the name of the route “inicio” is what I put in the routes on app init. If you have a different name you have to change.

document.addEventListener("backbutton", onBackKeyDown, false);

function onBackKeyDown(e) { 
    if (app.view.main.router.currentRoute.name == "inicio" || app.view.main.history.length == 1) {
        app.toast.create({
          text: 'Presione SALIR para cerrar la app.',
          closeButton: true,
          closeButtonText: 'Salir',
            closeButtonColor: 'lime',
            closeTimeout: 2000,
          on: {
             closeButtonClick: function () {
              navigator.app.exitApp();
                e.preventDefault();
            },
          }
        }).open();
    } else {
        if ($$('.modal-in').length > 0) {
            app.popup.close();
            return false;
        } else if ($$('.card-opened').length > 0) {
                app.card.close('.card-expandable');
        } else {
            mainView.router.back();
        }
    }
    return true;
};

You can see this code working in this app

1 Like
9

I cant download your app, it is not supported in my country?

This is app.js code

10

You can make it work?