在设备上使用android后退按钮返回到Framework7应用程序中的主视图?

Aky*_*mar 11 html javascript android cordova html-framework-7

我最近使用framework7和cordova构建了一个应用程序.我的应用程序包含一个单独的html文件,其中包含所有视图.要在视图之间导航,每个子视图顶部都会显示一个后退按钮.

如果有人按下设备上的后退按钮,应用程序将关闭.

当我在子页面中时,如何使用后退按钮进入主页面?

我已经阅读了framework7网站上的路由器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'});
Run Code Online (Sandbox Code Playgroud)

请注意,当我在另一个div中时,我想使用设备上的物理按钮导航到主视图.

请帮忙.

小智 8

如果您只想导航到后页,请pushState : true在应用初始化中使用,您将能够使用framework7中的硬件后退按钮返回.如果要打开特定页面,mainView.router.load则是framework7中的一个函数.您可以在路由器上进行验证以检查页面是否是您的mainView页面.通过这样做,您可以控制退出的应用程序.当后台页面加载它调用路由器和路由器为您提供有关页面的详细信息,即:page.name,page.query.希望这可以帮助


小智 8

你好开发者,

我知道每个人都对framework7中的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();
    }
}
Run Code Online (Sandbox Code Playgroud)