Back button not work

Questions
1

Hi all,
i returned to develop with Framework7 using latest 6.0.15 and i have a problem with back button action.

I created a new cordova app and after added Framework7 components (.js, .css, fonts…)
From my previous Framework7 project many thinks are changed :smile: so i init app as follow:

// Init app
var myApp = new Framework7({
	el: '#app',
    animateNavBackIcon:true,
    material: true,
    cache: true,
    
    // Add default routes
    routes: [
        { path: '/',        url: './index.html', },
        { path: '/wine/',   url: './wine.html', },        
    ],
});

also create view

var mainView = myApp.views.create('.view-main', {
    domCache: true
});

and create a second page

    <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner sliding">
            <div class="left">
                <a href="#" class="link back">
                    <i class="icon material-icons-outlined">arrow_back</i>
                </a>
            </div>

and create back button event handler

    // wait for device is ready
    $$(document).on('deviceready', function() {
        console.log(APP + 'deviceready'); 
        
        // listen for back button pressed
        $$(document).on('backbutton', function(e) {
            
            // debug
            console.log(APP + 'backbutton');
            
            e.preventDefault();

but when i move into second page and i try to click on back arrow, backbutton action not raise.

It happened on browser and also android platform.

Could you help me ?

thanks

2

SOLVED :grinning:

i used

<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>

before panel and removed
<div class="pages">

after view-main

1 Like