Question

我正在尝试将“browsehotels.html”页面上的后退按钮实现为this代码笔中显示的代码示例。

<ons-sliding-menu
  menu-page="menu.html" main-page="home.html" side="left"
  var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>

<ons-template id="menu.html">
  <ons-page modifier="menu-page">
    <ons-toolbar modifier="transparent"></ons-toolbar>

    <ons-list class="menu-list">
      <ons-list-item class="menu-item" ng-click="menu.setMainPage('home.html', {closeMenu: true})">
        <ons-icon icon="fa-plus"></ons-icon>
        Home
      </ons-list-item>

      <ons-list-item class="menu-item" ng-click="menu.setMainPage('browsehotels.html', {closeMenu: true})">
        <ons-icon icon="fa-bookmark"></ons-icon>
        Browse Hotels
      </ons-list-item>

    <ons-list-item class="menu-item" ng-click="menu.setMainPage('specialoffers.html', {closeMenu: true})">
        <ons-icon icon="fa-bookmark"></ons-icon>
        Special Offers <div class="notification menu-notification">3</div>
      </ons-list-item>        

      <ons-list-item class="menu-item" ng-click="menu.setMainPage('hoteldetails.html', {closeMenu: true})">
        <ons-icon icon="fa-bookmark"></ons-icon>
        Blog
      </ons-list-item>        

      <ons-list-item class="menu-item" ng-click="menu.setMainPage('hoteldetails.html', {closeMenu: true})">
        <ons-icon icon="fa-bookmark"></ons-icon>
        Bookings
      </ons-list-item>        

      <ons-list-item class="menu-item" ng-click="menu.setMainPage('hoteldetails.html', {closeMenu: true})">
        <ons-icon icon="fa-bookmark"></ons-icon>
        Contact Us
      </ons-list-item>        

    </ons-list>

  </ons-page>
</ons-template>

<ons-template id="home.html">
  <ons-navigator var="myNav">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggle()">
          <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Some App with sliding menu</div>
      <div class="right">
        <ons-toolbar-button>
            <ons-icon icon="refresh" size="30px" fixed-width="true"></ons-icon>
        </ons-toolbar-button>
      </div>
    </ons-toolbar>

    <ons-list>
        <ons-list-item ng-click="myNav.pushPage('newpage.html')">
             Some list item
        </ons-list-item>
         <ons-list-item ng-click="myNav.pushPage('newpage2.html')">
             Some list item2
        </ons-list-item>
    </ons-list>
  </ons-page>
  </ons-navigator>
</ons-template>

<ons-template id="newpage.html">
  <ons-page>
     <ons-toolbar>
        <div class="left" style="line-height: 44px">
          <ons-back-button>Back</ons-back-button>
        </div>
        <div class="center">Title</div>
      </ons-toolbar>
  </ons-page>
</ons-template>
<ons-template id="newpage2.html">
  <ons-page>
     <ons-toolbar>
        <div class="left" style="line-height: 44px">
          <ons-back-button>Back</ons-back-button>
        </div>
        <div class="center">Title2</div>
      </ons-toolbar>
  </ons-page>
</ons-template>


<ons-template id="browsehotels.html">
  <ons-navigator var="myNav">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggle()">
          <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Browse hotels</div>
      <div class="right">
        <ons-toolbar-button>
            <ons-icon icon="refresh" size="30px" fixed-width="true"></ons-icon>
        </ons-toolbar-button>
      </div>
    </ons-toolbar>
       <ons-list>
        <ons-list-item ng-click="myNav.pushPage('newpage.html')">
             hotels - Some list item
        </ons-list-item>
         <ons-list-item ng-click="myNav.pushPage('newpage2.html')">
             hotels - Some list item2
        </ons-list-item>
    </ons-list>
  </ons-page>
  </ons-navigator>
</ons-template>

当我将一个ons后退按钮放入browsehotels.html页面时，它不显示，因为没有页面可以返回。有没有办法我可以手动设置页面“返回”？或者我应该重新编码结构以不同的方式运作？

在代码笔示例中，当用户访问browsehotels.html页面并希望返回时，某些人可能会自然地点击他们的Android后退按钮，在这种情况下会关闭应用程序。相反，它（以及实际的编码后退按钮）将用户返回到home.html页面。

Answer 1

您只能使用$model=new modelName('search'); $results = $model->search()->getData();个样式来制作与您想要的行为相似的内容：

ons-back-button

在这种情况下，您甚至不需要导航器。

另一种选择是将滑动菜单与导航器结合在一起，并始终使用<style> .ons-back-button__icon { vertical-align: top; font-size: 36px; margin-left: 8px; margin-right: 2px; width: 16px; display: inline-block; padding-top: 1px; } </style> <ons-toolbar-button class="toolbar-button--quiet" onclick="menu.setMainPage(.....)"> <i class="ion-ios-arrow-back ons-back-button__icon"></i> Back </ons-toolbar-button>和navi.resetToPage(...)代替navi.pushPage(...)。与this类似的东西。

Answer 2

最简单的解决方案是使用以下代码将“home.html”添加回页面堆栈中：

document.addEventListener("pageinit",function(e){
    if(e.target.id == "browsehotels"){
        nav.insertPage(-1, 'home.html', {param: 'value'});
    }
}, false);

通过将“browsehotels”的页面ID设置为browsehotels.html模板的子页面元素，上面的代码将检测何时加载此页面，然后将home.html添加到导航中，以便添加ons back按钮或使用设备自带的后退按钮将带您进入home.html页面。

OnsenUI（Phonegap） - 滑动菜单＆amp;导航器后退按钮

2 个答案: