【问题标题】:OnsenUI onresume reload appOnsenUI onresume 重新加载应用程序
【发布时间】:2016-04-09 15:40:45
【问题描述】:

我的应用程序有 3 个选项卡,我想将用户返回到启动屏幕或恢复时的特定选项卡,以便我可以确保我拥有用户的地理位置。这是我尝试过的:

 // Wait for device API libraries to load
function onLoad() {
    document.addEventListener( "deviceready", onDeviceReady, false );
}

// device APIs are available
function onDeviceReady() {
    document.addEventListener( "resume", onResume, false );
}

// Handle the resume event
function onResume() {
    tabbar.setIndex( 1 );
    modal.show();
    getUsersLocation( getEstablishments );
}

【问题讨论】:

  • 什么不做?此外,您不需要嵌套的事件侦听器。
  • 它什么也没做...标签栏没有被设置。 onResume 不会触发。

标签: cordova onsen-ui monaca


【解决方案1】:

此代码已在 Android 上的 Monaca 调试器中进行了测试,并且运行良好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
    <title>Onsen UI Forum Help by Munsterlander</title>

    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.8/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.8/css/onsen-css-components.css">
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.8/js/onsenui.js"></script>
    <script src="components/loader.js"></script>

    <script>
        document.addEventListener( "resume", function(e) {
            alert("You're back!");
            document.getElementById('myNav').setActiveTab(2);
        });
    </script>    
</head>

<body>

<ons-tabbar id="myNav">
  <ons-tab page="home.html" active="true">
    <ons-icon icon="ion-home"></ons-icon>
    <span style="font-size: 14px">Home</span>
  </ons-tab>
  <ons-tab page="fav.html">
    <ons-icon icon="ion-star"></ons-icon>
    <span style="font-size: 14px">Favorites</span>
  </ons-tab>
  <ons-tab page="settings.html">
    <ons-icon icon="ion-gear-a"></ons-icon>
    <span style="font-size: 14px">Settings</span>
  </ons-tab>
</ons-tabbar>
<ons-template id="home.html">
  <p>Home</p>
</ons-template>
<ons-template id="fav.html">
  <p>Fav</p>
</ons-template>
<ons-template id="settings.html">
  <p>Settings</p>
</ons-template>

</body>
</html>

我要说的唯一怪癖是调试应用程序本身,如果这是您用于测试的东西。要触发事件,您需要打开另一个应用程序,因此当您转到打开的窗口时,调试器不是堆栈中的第一个。如果是第二个,则事件触发没有问题。

【讨论】:

猜你喜欢
  • 2020-06-06
  • 2013-05-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-02-11
  • 1970-01-01
  • 1970-01-01
  • 2011-04-05
相关资源
最近更新 更多