web-dev-qa-db-fra.com

Utilisez le bouton de retour Android sur l'appareil pour revenir à la vue principale de l'application Framework7?

J'ai récemment construit une application en utilisant framework7 et cordova. Mon application consiste en un seul fichier html contenant toutes les vues. Pour naviguer entre les vues, un bouton Précédent est présent en haut de chaque vue enfant.

Si une personne appuie sur le bouton de retour de l'appareil, l'application sera fermée. 

Comment puis-je utiliser le bouton Précédent pour accéder à la page principale lorsque je suis dans les pages enfants?

J'ai lu l'API du routeur sur le site Web de framework7, mais c'est très déroutant et ne semble pas fonctionner. Voici ce que j'essaye:

<html>
  <head>...</head>
  <body>
    ...
    <!-- Views -->
    <div class="views">
      <!-- View -->
      <div class="view view-main">
        <!-- Pages -->
        <div class="pages">
          <!-- Home page -->
          <div class="page" data-page="index">
            <div class="page-content">
              <p>Home page</p>
            </div>
          </div>

          <!-- About page -->
          <div class="page cached" data-page="about">
            <div class="page-content">
              <p>About page</p>
            </div>
          </div>

          <!-- Services page -->
          <div class="page cached" data-page="services">
            <div class="page-content">
              <p>Services page</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    ...
  </body>
</html>

// Initialize App  
var myApp = new Framework7();

// Initialize View          
var mainView = myApp.addView('.view-main')          

// Load about page:
mainView.router.load({pageName: 'about'});

Veuillez noter que je souhaite utiliser le bouton physique présent sur le périphérique pour accéder à la vue principale lorsque je suis dans une autre div.

S'il vous plaît aider.

javascriptandroidhtmlcordovaframework7
11
Aky Kumar

Si vous souhaitez simplement naviguer vers les pages précédentes, utilisez pushState : true lors de l'initialisation de l'application, vous pourrez revenir en arrière à l'aide du bouton retour matériel de framework7 . Si vous souhaitez ouvrir une page spécifique, mainView.router.load est une fonction de framework7 . Vous pouvez appliquer une validation au routeur pour vérifier si page est votre page mainView.En faisant cela, vous pouvez contrôler la sortie de l'application. ie: page.name, page.query. J'espère que cela vous aidera

8
Mahen

Bonjour chers développeurs,

Je sais que tout le monde est tellement ennuyé par le problème du bouton de retour de matériel Android dans framework7, et trouver une solution est également très fastidieux, car je me suis battu. J'ai donc un extrait de code qui vous aidera à gérer tous les problèmes liés au bouton arrière du matériel (popup, modaux, popovers, panneau latéral et sortie de l'application) sur les appareils Android. veuillez parcourir le code et supprimer la requête en cas de confusion.

Fonction prêt à l'appareil  

function onDeviceReady() {
    document.addEventListener('backbutton', onBackKeyDown, false);
}

function onBackKeyDown() {
    var cpage = mainView.activePage;
    var cpagename = cpage.name;
    console.log(cpagename);
    if (($$('#leftpanel').hasClass('active')) || ($$('#rightpanel').hasClass('active'))) { // #leftpanel and #rightpanel are id of both panels.
        myApp.closePanel();
        return false;
    } else if ($$('.modal-in').length > 0) {
        myApp.closeModal();
        return false;
    } else if (cpagename == 'index') {
        myApp.confirm('Are you sure you want to exit?', function() {
            // var deviceType = device.platform;
            // if(deviceType == “Android” || deviceType == “Android”){
            navigator.app.exitApp();
            // }
        },
        function() {
        });
    } else {
        mainView.router.back();
    }
}
7
sjkushwaha21

Pour revenir en arrière, allez à Étape 1. my-app.js Étape2. Collez ce qui suit: 

// Initialize your app
var myApp = new Framework7({pushState: true,});

Exécutez votre application à nouveau. J'espère que cela t'aides

4
Edo Udoma

Mettez le code ci-dessous dans la fonction Device Ready 

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

créer la fonction ci-dessous 

function yourCallbackFunction(){
 alert(window.location);
 }

vous pouvez faire n'importe quoi si vous obtenez cet événement une fois. vous pouvez naviguer en utilisant différents identifiants de page vers différentes vues.

2
Divyanshu Joshi

c'est du travail. :)

ouvrir cuisine-sink.js mettre le code 
var myApp = new Framework7 ({ pushState: true, }); 

0
Abidroid

Grâce à @ sjkushwaha21, j'ai modifié le code pour Framework7 V2. Utilisé dans les méthodes de l'objet Framework7, il est appelé par

onDeviceReady: function() {
    document.addEventListener("backbutton", myApp.methods.onBackKeyDown, false);
},

... et voici la méthode:

var myApp = new Framework7({
    ....,
    methods: {
        onBackKeyDown: function() {
            var leftp = myApp.panel.left && myApp.panel.left.opened;
            var rightp = myApp.panel.right && myApp.panel.right.opened;
            if ( leftp || rightp ) {
                myApp.panel.close();
                return false;
            } else if ($$('.modal-in').length > 0) {
                myApp.dialog.close();
                return false;
            } else if (myApp.views.main.router.url == '/') {
                myApp.dialog.confirm('Are you sure you want to exit?', 'Exit MyApp', function() {
                    navigator.app.exitApp();
                },
                function() {
                });
            } else {
                mainView.router.back();
            }

        }, ...
0
MWik