Как использовать как табуляцию, так и навигатор на onsen ui

Я пытаюсь использовать интерфейс Onsen с кордорой, чтобы создать приложение iOS, имеющее тот же план наложения, что и приложение Facebook. Там, где есть вкладка внизу, а пятая вкладка - это кнопка «больше», которая затем открывает страницу просмотра списка, которая имеет больше ссылок на большее количество страниц.Как использовать как табуляцию, так и навигатор на onsen ui

Я могу заставить его работать, используя табуляцию с var="nav", а затем в режиме просмотра списка nav.loadPage('otherpage.html'), и это работает. Однако он не дает этого «сексуального» эффекта скольжения на страницу. Это просто.

Я попытался выполнить этот вопрос здесь: #29829148, в котором вы реализуете как панель, так и навигатор, но когда я помещаю навигатор внутри своих вкладок, он перепутал внешний вид панели и когда я нажимаю на список, но это было в самом нижнем правом углу устройства, так что, другими словами, это не сработало.

Может ли кто-нибудь посоветовать, как это сделать?

Для Другой крупный, вот это изображение, которое показывает, как основное приложение Facebook с TabBar и что это выглядит как при нажатии на последнюю вкладку «более»

источник

2016-01-07 tvirelli

Я думаю, это то, что ваш разговор около. Вот одна из моих страниц в моем приложении. Мой IOS один в ожидании, но here is the google play one. Просто зайдите в меню> connect , и он должен быть похож на то, что вы пытаетесь сделать.

<!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>

и в отдельных страниц, таких как adults.html (которые я хотел бы подчеркнуть, что Я их в отдельно отдельные файлы, потому что я хотел использовать ONS-карусель тоже. Мои другие дочерние страницы выглядит следующим образом.

<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>

источник

2016-01-07 21:15:49

Являются ли ваши .html-страницы действительными отдельными файлами? Я как, потому что я использую для моего, а не на самом деле разные файлы. – tvirelli

Первый блок текста - это собственный файл. и последние блоки являются двумя частями другого отдельного. Это просто для обеспечения того, чтобы навигатор содержался, чтобы он не мешал моей карусели. Это была просто немедленная работа, которую я использовал для их объединения. Я также проверил бы приложение, чтобы убедиться, что именно он ищет, прежде чем внедрять. –

также обратите внимание, что я назвал весь источник на первой странице. Я на самом деле использовал href для перехода на эту страницу, так что это нужно будет для источников, которые будут вызваны. Я сделал это намеренно, чтобы запустить навигатор на дочерних страницах. –

Что вы просить очень легко реализовать, просто создайте элемент ons-tabbar и установите animation='slide'. Если вы хотите использовать ons-navigator, просто добавьте его внутри одного из 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>

Надеется, что это помогает!

источник

2016-01-08 01:56:31

Как использовать как табуляцию, так и навигатор на onsen ui

ответ

Смежные вопросы