文章/答案/技术大牛

发布

社区首页 >问答首页 >onsen-ui ons后退按钮不工作

问onsen-ui ons后退按钮不工作
EN

Stack Overflow用户

提问于 2015-04-17 12:50:28

回答 2查看 2.5K关注 0票数 1

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

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

我这样做如下：

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

在新的页，我有一个In工具栏与开始-后退按钮，不工作。我想做一个popPage()来返回到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>

javascript

html

cordova

back-button

onsen-ui

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-04-19 05:15:27

ons-navigator的声明是错误的，您应该将导航器放在主页中。其结构应类似于：

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

您可以找到一个工作的CodePen示例这里，希望它有帮助！

票数 0

Stack Overflow用户

发布于 2016-06-24 16:52:47

<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));
};

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29699713

复制

相似问题

问onsen-ui ons后退按钮不工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问onsen-ui ons后退按钮不工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问onsen-ui ons后退按钮不工作
EN