使用设备上的 android 后退按钮 return 到 Framework7 应用程序中的主视图?
Use android back button on device to return to main view in Framework7 app?
我最近使用 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'});
请注意,当我在另一个 div 时,我想使用设备上的物理按钮导航到主视图。
请帮忙。
将以下代码放入设备就绪函数中
document.addEventListener("backbutton", yourCallbackFunction, false);
创建以下函数
function yourCallbackFunction(){
alert(window.location);
}
只要你得到一次那个事件,你就可以做任何事情。您可以使用不同的页面 ID 导航到不同的视图。
如果您只想导航到后退页面,请在应用程序初始化中使用 pushState : true
,您将能够使用 framework7 中的硬件后退按钮返回。
如果要打开特定的页面,mainView.router.load
是framework7中的一个函数。
您可以在路由器上进行验证以检查页面是否是您的主视图 page.By 这样做您可以控制退出 app.when 后台加载它调用路由器并且路由器为您提供有关页面的详细信息即:page.name
,page.query
。
希望这有帮助
要返回,请转到
步骤 1. 我的-app.js
第2步。粘贴以下内容:
// Initialize your app
var myApp = new Framework7({pushState: true,});
运行 再次使用您的应用。希望这有帮助
各位开发者大家好,
我知道大家对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();
}
}
这是工作。 :)
开放式厨房-sink.js放码
var myApp = new Framework7({
推状态:真,
});
感谢@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();
}
}, ...
我最近使用 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'});
请注意,当我在另一个 div 时,我想使用设备上的物理按钮导航到主视图。
请帮忙。
将以下代码放入设备就绪函数中
document.addEventListener("backbutton", yourCallbackFunction, false);
创建以下函数
function yourCallbackFunction(){
alert(window.location);
}
只要你得到一次那个事件,你就可以做任何事情。您可以使用不同的页面 ID 导航到不同的视图。
如果您只想导航到后退页面,请在应用程序初始化中使用 pushState : true
,您将能够使用 framework7 中的硬件后退按钮返回。
如果要打开特定的页面,mainView.router.load
是framework7中的一个函数。
您可以在路由器上进行验证以检查页面是否是您的主视图 page.By 这样做您可以控制退出 app.when 后台加载它调用路由器并且路由器为您提供有关页面的详细信息即:page.name
,page.query
。
希望这有帮助
要返回,请转到 步骤 1. 我的-app.js 第2步。粘贴以下内容:
// Initialize your app
var myApp = new Framework7({pushState: true,});
运行 再次使用您的应用。希望这有帮助
各位开发者大家好,
我知道大家对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();
}
}
这是工作。 :)
开放式厨房-sink.js放码
var myApp = new Framework7({
推状态:真,
});
感谢@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();
}
}, ...