web-dev-qa-db-ja.com

Androidデバイスの戻るボタンを使用して、Framework7アプリのメインビューに戻りますか？

私は最近、framework7とCordovaを使用してアプリを作成しました。私のアプリは、すべてのビューを含む単一のhtmlファイルで構成されています。ビュー間を移動するために、各子ビューの上部に戻るボタンがあります。

人がデバイスの戻るボタンを押すと、アプリが閉じます。

子ページを表示しているときに、戻るボタンを使用してメインページに移動するにはどうすればよいですか？

私は、framework7のWebサイトでルーターAPIを読みましたが、それは本当に混乱し、機能していないようです。これが私が試していることです：

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

別のdivにいるときは、デバイスにある物理ボタンを使用してメインビューに移動することに注意してください。

助けてください。

javascriptandroidhtmlcordovahtml-framework-7
11
Aky Kumar

戻るページに移動するだけの場合は、pushState : trueアプリの初期化で、framework7のハードウェア戻るボタンを使用して戻ることができます。特定のページを開きたい場合は、mainView.router.loadは、framework7の関数です。ルーターに検証を配置して、ページがmainViewページであるかどうかを確認できます。これにより、終了ページを制御できます。バックページの読み込み時にルーターが呼び出され、ルーターがページに関する詳細を提供します：page.name、page.query。お役に立てれば

8
Mahen

みなさん、こんにちは。

私は、フレームワーク7のAndroidハードウェアの戻るボタンの問題にうんざりしていることを知っています。解決策を見つけるのも非常に退屈です。 Androidデバイスの場合、ハードウェアの戻るボタンのすべての問題（ポップアップ、モーダル、ポップオーバー、サイドパネル、アプリの終了）。コードに目を通し、混乱がある場合はクエリをドロップしてください。

デバイスレディ機能

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();
    }
}
8
sjkushwaha21

戻るには、ステップ1に進みます。my-app.jsステップ2。以下を貼り付けます。

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

アプリをもう一度実行します。お役に立てれば

4
Edo Udoma

以下のコードをデバイス準備機能に配置します

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

関数の下に作成

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

イベントを一度取得すれば、何でもできます。別のページIDを使用して別のビューに移動できます。

2
Divyanshu Joshi

@ sjkushwaha21のおかげで、Framework7 V2のコードを変更しました。呼び出されるFramework7オブジェクトのメソッドで使用されます

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

...そしてここにメソッドがあります：

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

        }, ...
1
MWik

これは仕事です。 :)

open kitchen-sink.js putコード
var myApp = new Framework7（{pushState：true、}）;

0
Abidroid