Framework7后退按钮侦听器不适用于多个选项卡

Question

我试图阻止我的cordova android 应用程序在我的手机 (android) 上按下物理后退按钮时不关闭，相反，我想打开一个对话框以在关闭应用程序之前按下按钮两次但我不知道如何正确调用或收听返回按钮。

这是我使用framework7的标签

<div class="toolbar tabbar-labels toolbar-bottom-md">
        <div class="toolbar-inner">
          <a href="#view-home" class="tab-link tab-link-active">
            <i class="icon f7-icons ios-only">home</i>
            <i class="icon f7-icons ios-only icon-ios-fill">home_fill</i>
            <i class="icon material-icons md-only">home</i>
            <span class="tabbar-label">Home</span>
          </a>
          <a href="#view-catalog" class="tab-link">
            <i class="icon f7-icons ios-only">list</i>
            <i class="icon f7-icons ios-only icon-ios-fill">list_fill</i>
            <i class="icon material-icons md-only">view_list</i>
            <span class="tabbar-label">catalog</span>
          </a>
          <a href="#view-settings" class="tab-link">
            <i class="icon f7-icons ios-only">settings</i>
            <i class="icon f7-icons ios-only icon-ios-fill">settings_fill</i>
            <i class="icon material-icons md-only">settings</i>
            <span class="tabbar-label">Settings</span>
          </a>
        </div>
      </div>

Framework7 初始化说明我已经声明了pushState

 var app  = new Framework7({
      root: '#app',  
      id: 'io.HomeApplication.Homeapp',  
      name: 'My Application',  
      theme: 'auto',  
      pushState :true,   

 //other methods,data here

初始化视图

// Init/Create views
var homeView = app.views.create('#view-home', {
  url: '/',
  on: {
    pageInit: function (e, page) {
      // do something when page initialized
      document.addEventListener("backbutton", onBackKeyDown, false);
    } 
  }
});

 var catalogView = app.views.create('#view-catalog', {
    url: '/devices/'
  });

var settingsView = app.views.create('#view-settings', {
  url: '/settings/'
});

首先，我将onBackKeyDown 作为函数调用。

function onBackKeyDown(){

}

但现在我把它放在我的app 方法上。

// App root methods
  methods: {

    onBackKeyDown: function(){

      app.dialog.alert('this was called');

    },

但是，当我按下手机上的后退按钮时，它不会执行任何建议。

Answer 1

您的 onBackKeyDown 侦听器位于 view-home 视图中。 从中取出并将其放置在您代码的其余部分的同一级别：

 var app  = new Framework7({.....});
 document.addEventListener("backbutton", onBackKeyDown, false);

它应该是所有应用程序的监听器。