onsen-ui ons-back-button 不工作

Question

我正在 Phongap 和 Cordova 中使用移动应用程序。

我的 index.html 页面有 ons-list，在每个项目中我都被重定向到另一个页面。

我这样做如下：

<list-item-ons modifier = "chevron" ng-click = "myNavigator.pushPage ('NewPage.html', {animation: 'slide'})">

在新页面中，我有一个 ons-toolbar 和 ons-back-button 不起作用。我想做一个 popPage() 到 return 到 Index.html.

有人可以帮我解决这个问题吗？

这是我的代码：

Index.html:

  <!doctype html>
  <html lang="en" ng-app="app">
  <head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">

  <title>My App</title>  

  <link rel="stylesheet" href="lib/onsen/css/onsenui.css">  
  <link rel="stylesheet" href="styles/app.css"/>
  <link rel="stylesheet" href="styles/onsen-css-components.min.css">  

  <script type="text/javascript" src="cordova.js"></script>
  <script src="lib/onsen/js/angular/angular.js"></script>    
  <script src="lib/onsen/js/onsenui.js"></script>    
  <script src="js/jquery-1.11.2.min.js"></script>  

   <script src="js/app.js"></script>  

  </head>

 <body ng-controller="AppController">

     <ons-navigator title="Navigator" var="myNavigator">
         <ons-sliding-menu main-page="page1.html"
                           menu-page="menu.html"
                           side="left"
                           max-slide-distance="250px"
                           var="menu"
                           type="overlay">
         </ons-sliding-menu>

         <ons-template id="page1.html">
             <ons-page>
                 <ons-toolbar>
                     <div class="left">
                         <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
                     </div>
                     <div class="center">MyAppName</div>
                 </ons-toolbar>
                 <div style="width:100%;height:70%">
                     <ons-list>
                         <ons-list-item modifier="chevron">
                             <div style="text-align:center">Item 1</div>
                         </ons-list-item>
                         <ons-list-item modifier="chevron">
                             <div style="text-align:center">Item 2</div>
                         </ons-list-item>
                         <ons-list-item modifier="chevron">
                             <div style="text-align:center">Item 3</div>
                         </ons-list-item>
                         <ons-list-item modifier="chevron">
                             <div style="text-align:center">Item 4</div>
                         </ons-list-item>
                         <ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('NewPage.html', { animation : 'slide' })">
                             <div style=" text-align:center">Item 5</div>
                         </ons-list-item>
                     </ons-list>
                 </div>
             </ons-page>
         </ons-template>
         <ons-template id="menu.html">
             <ons-list>
                 <ons-list-item modifier="tappable" onclick="menu.setMainPage('page1.html', {closeMenu: true})">
                     <ons-icon icon="fa-home" size="20px" style="color: #661f7a"></ons-icon>
                     Home
                 </ons-list-item>
                 <ons-list-item modifier="tappable">
                     <ons-icon icon="fa-question" size="20px" style="color: #661f7a"></ons-icon>
                     Help
                 </ons-list-item>
                 <ons-list-item modifier="tappable">
                     <ons-icon icon="fa-info-circle" size="20px" style="color: #661f7a"></ons-icon>
                     About My App
                 </ons-list-item>
             </ons-list>
         </ons-template>

     </ons-navigator>



</body>
</html>

NewPage.html（包含不起作用的后退按钮）：

<ons-page>
    <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">My New Page</div>
    </ons-toolbar>

    <div>
        <div>
            <input class="text-input" id="my-input" placeholder="Enter some Text...">
        </div>
       <div>
           <ons-switch var="mySwitch1"></ons-switch>
       </div>
        <div>
            <select id="select1"></select>
        </div>
        <div>
            <ons-switch var="mySwitch2"></ons-switch>

        </div>
        <div>
            <select id="select2"></select>
        </div>

    </div>
</ons-page>

Answer 1

ons-navigator的声明是错误的，你应该把导航器放在你的主页上。结构应该是这样的：

<ons-template id="mainPage.html">
  <ons-navigator var="myNav">
    <ons-page>
      ...content...
    </ons-page>
  </ons-navigator>
</ons-template>

您可以找到一个有效的 CodePen 示例 HERE，希望对您有所帮助！

Answer 2

<div class="left" onclick="fn.load('home.html')" tappable><ons-back-button>Back</ons-back-button></div>

在你的 js 文件中：

window.fn = {};

window.fn.open = function() {
  var menu = document.getElementById('menu');
  menu.open();
};

window.fn.load = function(page) {
  var content = document.getElementById('content');
  var menu = document.getElementById('menu');
  content.load(page).then(menu.close.bind(menu));
};

onsen-ui ons-back-button 不工作

onsen-ui ons-back-button not working

html

javascript

back-button

cordova

onsen-ui