web-dev-qa-db-de.com

Verwenden Sie die Android-Zurück-Taste auf dem Gerät, um zur Hauptansicht in der Framework7-App zurückzukehren.

Ich habe vor kurzem eine App mit framework7 und cordova erstellt. Meine App besteht aus einer einzigen HTML-Datei, die alle Ansichten enthält. Um zwischen den Ansichten zu navigieren, befindet sich oben in jeder untergeordneten Ansicht eine Zurück-Schaltfläche.

Wenn eine Person die Zurück-Taste am Gerät drückt, wird die App geschlossen. 

Wie kann ich die Zurück-Taste verwenden, um zur Hauptseite zu gelangen, wenn ich mich auf den untergeordneten Seiten befinde?

Ich habe die Router-API auf der Website von framework7 gelesen, aber sie ist wirklich verwirrend und scheint nicht zu funktionieren. Folgendes versuche ich:

<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'});

Bitte beachten Sie, dass ich die physische Schaltfläche des Geräts verwenden möchte, um zur Hauptansicht zu navigieren, wenn ich mich in einem anderen div befinde.

Bitte helfen.

javascriptandroidhtmlcordovaframework7
11
Aky Kumar

Wenn Sie nur zu den hinteren Seiten navigieren möchten, verwenden Sie pushState : true in der Anwendungsinitialisierung. Sie können mit der Zurück-Schaltfläche der Hardware in framework7 ..__ zurückgehen. Wenn Sie eine bestimmte Seite öffnen möchten, mainView.router.load ist eine Funktion in framework7 . Sie können eine Überprüfung auf den Router setzen, um zu prüfen, ob page Ihre mainView-Seite ist. Auf diese Weise können Sie das Beenden von app steuern dh: page.name, page.query. Hoffe das hilft

8
Mahen

Hallo Mitentwickler,

Ich weiß, dass jeder mit dem Problem der Android-Hardware-Schaltfläche in Framework7 so verärgert ist, und eine Lösung zu finden, ist auch sehr langweilig, da ich mich selbst schwer getan habe. Daher habe ich hier ein Code-Snippet, mit dem Sie alle Probleme mit der Hardware-Zurück-Schaltfläche (Popup, Modals, Popovers, Seitenfenster und App-Exit) auf Android-Geräten verwalten können. Bitte gehen Sie den Code durch und löschen Sie die Abfrage, wenn Verwirrung auftritt.

Gerätebereitschaftsfunktion  

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

Um zurück zu navigieren, gehen Sie zu Schritt 1. my-app.js Step2. Fügen Sie folgendes ein: 

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

Führen Sie Ihre App erneut aus. Hoffe das hilft

4
Edo Udoma

Geben Sie den folgenden Code in die Device-Ready-Funktion ein 

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

funktion unten erstellen 

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

sie können alles tun, wenn Sie dieses Ereignis einmal erhalten. Sie können mithilfe verschiedener Seiten-IDs zu verschiedenen Ansichten navigieren.

2
Divyanshu Joshi

das ist Arbeit. :)

offene kitchen-sink.js Code einfügen 
var myApp = new Framework7 ({ pushState: true, }); 

0
Abidroid

Dank @ sjkushwaha21 habe ich den Code für Framework7 V2 geändert. Wird in Methoden des Framework7-Objekts verwendet, von dem es aufgerufen wird

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

... und hier ist die Methode:

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