Onsen-ui - 后退按钮，滑动菜单不起作用

Question

I am creating a mobile app in monaca.mobi and I am using Onsen Ui. 我正在monaca.mobi创建一个移动应用程序，我正在使用Onsen Ui。

The app has many pages and every page link to another page, so I need back button in all pages except the home page. 该应用程序有许多页面，每个页面链接到另一个页面，所以我需要在除主页之外的所有页面中的后退按钮。

I have in my index.html this: 我在我的index.html中：

    <!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="components/monaca-onsenui/css/onsen-css-components-default.css">
    <script>
        ons.bootstrap();
    </script>
</head>
<body>
    <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="home.html" side="left" type="overlay" max-slide-distance="200px">
    </ons-sliding-menu>
</body>
</html>

In my home.html page this: 在我的home.html页面中：

 <ons-page style="background: url('images/background.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover;">
        <div style="position:fixed;" class="navigation-bar">
  <div class="navigation-bar__left">
   <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
  </div>

  <div class="navigation-bar__center">
    <img class="gmlogo" src="images/logo.png"/>
  </div>

  <div class="navigation-bar__right">
    <span onclick="app.slidingMenu.setMainPage('push.html', {closeMenu: true})" class="toolbar-button--quiet navigation-bar__line-height">  <i class="fa fa-envelope-o fa-lg" style="color: #4E81BA"></i></span>
  </div>
</div>

<div class="outer">
<div class="middle">
<div class="inner">
<h2 class="center gmwhite unbold">Επιλογή Κατηγορίας</h2>
<button onclick="app.slidingMenu.setMainPage('pages/price/brand.html', {closeMenu: true})" class="gmhomebutton gmhomebutton--outline">Car Price List</button>
<button onclick="app.slidingMenu.setMainPage('pages/valuation/message.html', {closeMenu: true})" class="gmhomebutton gmhomebutton--outline">Car Valuation Price</button>

</div>
</div>
</div>
 </ons-page>

and in next page brand.html this: 在下一页brand.html中：

    <ons-page style="background: url('images/bg2.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover;">
        <div class="navigation-bar">
  <div class="navigation-bar__left">
  <div class="left" style="line-height: 144px">
        <ons-back-button ng-click="(home.html)">Back</ons-back-button>
      </div>
   <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
  </div>

  <div class="navigation-bar__center">
    <img class="gmlogo" src="images/logo.png"/>
  </div>

  <div class="navigation-bar__right">
    <span onclick="app.slidingMenu.setMainPage('push.html', {closeMenu: true})" class="toolbar-button--quiet navigation-bar__line-height">  <i class="fa fa-envelope-o fa-lg" style="color: #4E81BA"></i></span>
  </div>
</div>


<h4 class="center gmblack unbold">Μάρκες Αυτοκινήτων</h4>
<ul style="height: 70%;" class="gmlist">
  <li onclick="app.slidingMenu.setMainPage('pages/price/model.html', {closeMenu: true})" class="gmlist__item list__item--chevron">
    <img class="gmlistbrand" src="images/demo/abarth.png"/> Abarth
  </li>
  <li class="gmlist__item list__item--chevron">
    <img class="gmlistbrand" src="images/demo/abarth.png"/> Acura
  </li>
  <li class="gmlist__item list__item--chevron">
     <img class="gmlistbrand" src="images/demo/abarth.png"/> Aixam
  </li>
  <li class="gmlist__item list__item--chevron">
     <img class="gmlistbrand" src="images/demo/abarth.png"/> Alfa Romeo
  </li>
  <li class="gmlist__item list__item--chevron">
     <img class="gmlistbrand" src="images/demo/abarth.png"/> Alpina
  </li>
  <li class="gmlist__item list__item--chevron">
     <img class="gmlistbrand" src="images/demo/abarth.png"/> Ariel
  </li>
  <li class="gmlist__item list__item--chevron">
    <img class="gmlistbrand" src="images/demo/abarth.png"/> Asia Motors
  </li>
  <li class="gmlist__item list__item--chevron">
     <img class="gmlistbrand" src="images/demo/abarth.png"/> Aston Martin
  </li>
  <li class="gmlist__item list__item--chevron">
    <img class="gmlistbrand" src="images/demo/abarth.png"/> Audi
  </li>
  <li class="gmlist__item list__item--chevron">
    <img class="gmlistbrand" src="images/demo/abarth.png"/> Austin Healey
  </li>
</ul>

 </ons-page>

I have tried almost everything but I am not able to add back button to pages, can please someone help on that? 我已经尝试了几乎所有的东西，但是我无法在页面上添加按钮，可以请某人帮忙吗？

thanks 谢谢

Answer 1

I think you can't see the back button because you don't push page to the stack. 我认为您无法看到后退按钮，因为您没有将页面推送到堆栈。

For this you need to add an ons-navigator directive and use its "pushPage()" methode. 为此，您需要添加ons-navigator指令并使用其“pushPage（）”方法。

Check the documentation, specialy the live exemple: http://onsen.io/reference/ons-back-button.html 查看文档，特别是实时示例： http ： //onsen.io/reference/ons-back-button.html

Answer 2

Just add ons-back-button element in the toolbar of the pages from where you want to return from. 只需在要返回的页面的工具栏中添加ons-back-button元素即可。 ons-back-button doesn't take any parameter, it just returns to the previous page. ons-back-button不带任何参数，只返回上一页。 For example: 例如：

<ons-toolbar>
  <div class="left" style="line-height: 44px">
    <ons-back-button>Back</ons-back-button>
  </div>
  <div class="center">Title</div>
  <div class="right" style="line-height: 44px">
    Right
  </div>
</ons-toolbar>

Answer 3

If you need ons-back-button behavior in a page load from ons-sliding-menu add the ons-navigator directive in index.html and use in menu.html the pushPage() method and menu.closeMenu() 如果您需要在ons-sliding-menu页面加载中使用ons-back-button行为，请在index.html中添加ons-navigator指令，并在menu.html中使用pushPage（）方法和menu.closeMenu（）

index.html: index.html的：

<body>
  <ons-navigator animation="slide" var="myVar">  
    <ons-page>
      <ons-sliding-menu menu-page="menu.html" main-page="home.html" side="left" var="menu" type="reveal" max-slide-distance="260px" swipable="true" swipe-target-width="50">
      </ons-sliding-menu>
    </ons-page>
  </ons-navigator>
</body>

menu.html: menu.html：

<ons-list class="menu-list">
  <ons-list-item class="menu-item" ng-click="myVar.pushPage('about.html'); menu.closeMenu()">
    <ons-icon icon="fa-info-circle" fixed-width="true"></ons-icon> About
   </ons-list-item>
</ons-list>

home.html: home.html的：

<ons-page>
    <ons-toolbar modifier="opacity">
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggle()">
           <ons-icon icon="ion-navicon-round" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Title 1</div>
    </ons-toolbar>
    <div class="app-page">
      <ons-list>
        <ons-list-item modifier="chevron" class="list-item-container" ng-click="myVar.pushPage('mypage.html');">
          <ons-row>...

Onsen-ui - 后退按钮，滑动菜单不起作用

问题描述

3 个解决方案

解决方案1
2 2015-12-21 12:05:59

解决方案2
0 2015-12-21 08:52:46

解决方案3
0 2016-06-16 21:40:11

Onsen-ui - 后退按钮，滑动菜单不起作用

问题描述

3 个解决方案

解决方案1 2 2015-12-21 12:05:59

解决方案2 0 2015-12-21 08:52:46

解决方案3 0 2016-06-16 21:40:11

解决方案1
2 2015-12-21 12:05:59

解决方案2
0 2015-12-21 08:52:46

解决方案3
0 2016-06-16 21:40:11