Question

我正在尝试使用带有cordova的Onsen UI来创建一个iOS应用程序，该应用程序具有与Facebook应用程序相同的nagication布局。底部有一个标签栏，第五个标签是“更多”按钮，然后打开一个列表视图页面，其中包含更多页面的链接。

我可以使用带有var="nav"的tabbar然后在列表视图中执行nav.loadPage('otherpage.html')，这样就可以了。但是，它没有给出滑动到页面的“性感”效果。就在那里。

我在这里尝试了这个问题：#29829148你实现了tabbar和导航器，但当我在我的标签中放置导航器时，它会搞乱标签栏的外观并且当我点击列表视图时页面滑入，但它位于设备的最右下方，换句话说它不起作用。

有人可以建议怎么做吗？

参考，这是一个图像，显示带有标签栏的主Facebook应用程序以及单击最后一个标签“更多”时的样子

Answer 1

您要求的内容非常容易实现，只需创建ons-tabbar元素并设置animation='slide'即可。如果您也想使用ons-navigator，只需将其添加到tabbar元素内的ons-page之一。

这是一个有效的CodePen example。

以下是代码：

<ons-tabbar animation="slide">
  <ons-tabbar-item icon="home" label="Page1" active="true" page="page1.html" persistent></ons-tabbar-item>

  <ons-tabbar-item icon="gear" label="Page2" page="page2.html"></ons-tabbar-item>

  <ons-tabbar-item icon="star" label="Page3" page="page3.html"></ons-tabbar-item>
</ons-tabbar>

<ons-template id="page1.html">
  <ons-navigator var="myNavigator">
    <ons-toolbar>
      <div class="center">Page 1</div>
    </ons-toolbar>

    <div style="text-align: center">
      <h1>Page 1</h1>
      <ons-button ng-click="myNavigator.pushPage('new_page.html', { title: 'New Page' })">Push New Page</ons-button>
    </div>
  </ons-navigator>
</ons-template>

<ons-template id="page2.html">
  <div style="text-align: center">
    <h1>Page 2</h1>
  </div>
</ons-template>

<ons-template id="page3.html">
  <div style="text-align: center">
    <h1>Page 3</h1>
  </div>
</ons-template> 

<ons-template id="new_page.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">New Page</div>
    </ons-toolbar>

    <div style="text-align: center">
      <h1>New Page</h1>

      <ons-button ng-click="myNavigator.popPage();">
        Pop Page
      </ons-button>
    </div>
  </ons-page>
</ons-template>

希望它有所帮助！

Answer 2

我认为这就是你所说的。这是我的应用程序中的一个页面。我的IOS正在等待here is the google play one。只需转到菜单＆gt;连它应该与你想要做的类似。

    <!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>Living Word</title>  

  <!-- All our CSS -->
   <link rel="stylesheet" href="lib/onsen/css/onsenui.css">    
  <link rel="stylesheet" href="css/onsen-css-components.css"> 
  <link rel="stylesheet" href="css/plugins.css"/>
  <link rel="stylesheet" href="css/roots.css"/>
  <link rel="stylesheet" href="css/app.css"/>

  <!-- These are our JS libraries that make all the magic in our App -->
  <script src="lib/onsen/js/angular/angular.js"></script>    
  <script src="lib/onsen/js/onsenui.js"></script>    
  <script src="js/plugins.js"></script>  
  <script src="cordova.js"></script>
  <script src="js/app.js"></script>  

</head>



<ons-tabbar>
  <ons-tab page="adults.html" icon="ion-person" label="Adults" active="true"></ons-tab>
  <ons-tab page="teens.html" icon="ion-man" label="Teens"></ons-tab>
  <ons-tab page="kids.html" icon="fa fa-child" label="Kids"></ons-tab>
</ons-tabbar>

以及诸如adult.html之类的各个页面（这让我强调我将它们分成单独的文件，因为我也想使用ons-carousel。我的其他子页面看起来像这样。

<ons-modal var="modal">
<ons-icon icon="fa fa-hand-o-up"></ons-icon>
  <br><br>
  You can click on any tab...<br> <br>
  <img style="width:50%;" id="image" src="images/chalk.png"><br>
  Or slide the tab over to <br>preview the coordinator.<br><br>
  <ons-button id="show-modal" onclick="modal.hide()">Got It!</ons-button><br><br>
  Also, don't forget to explore the age groups!<br>
  <ons-icon icon="fa fa-chevron-down"></ons-icon>
</ons-modal>
<ons-navigator title="Navigator" var="myNavigator">

<ons-page>
  <ons-toolbar> 
    <div class="left">
      <a class="button--menu2" href="index.html"><ons-icon icon="fa fa-chevron-circle-left" fixed-width="false"></ons-icon> Home</a>
    </div>

.....和页面的结尾........................

      <ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('Adults/womens.html', {animation : 'slide' })">
      <ons-carousel swipeable overscrollable auto-scroll style="height: 50px; width: 100%; align: center;" initial-index="1" swipe-target-width="100">
        <ons-carousel-item class="button--menu">
          <strong>Nancy Martinez & Kris Driscoll</strong> 
        </ons-carousel-item>
         <ons-carousel-item class="button--menu">
        Women's Ministry
        </ons-carousel-item>
        </ons-carousel>
        </ons-list-item>
      <br />

    </ons-list>


  </div>

</ons-page>

</ons-navigator>

如何在onsen ui上同时使用tabbar和navigator

2 个答案: