Understanding the Association of Navigator and Tabber in the onsenUI

I'm a beginner who just started using onsenUI (I'm also studying regular js, let alone angular).
I am working on the sample Onsen UI Tabber, but when I tap the tabber icon to perform the page transition, the pushpage does not work on the page to which I want to transition.
Looking at the source, if I transition from Tabber, does the navigator come off?Yes,
What should I do to make the transition from tabbar take place in navigator?

monaca onsen-ui

2022-09-30 19:36

1 Answers

The basic way to manage the page stack is to specify a template starting with <ons-navigator> in the page attribute of <ons-tab> and manage the page stack on a tab-by-tab basis.

angular.module('app', ['onsen']);

<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.12/build/css/onsen-css-components.css"rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.12/build/css/onsenui.css"rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.12/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.12/build/js/onsenui.min.js"></script>

<bodying-app="app">
  <ons-tabbar>
    <ons-tabicon="home" page="nav1.html" active="true">/ons-tab>
    <ons-tabicon="user" page="nav2.html">/ons-tab>
    <ons-tabicon="gear" page="nav3.html">/ons-tab>
  </ons-tabbar>
  
  <ons-template id="nav1.html">
    <ons-navigator page="page1-1.html" var="nav1">/ons-navigator>
  </ons-template>
  <ons-template id="page1-1.html">
    <h1>page1-1</h1>
    <ons-buttoning-click="nav1.pushPage('page1-2.html')">Push</ons-button>
  </ons-template>
  <ons-template id="page1-2.html">
    <h1>page1-2</h1>
    <ons-buttoning-click="nav1.popPage()">Pop</ons-button>
  </ons-template>
  
  <ons-template id="nav2.html">
    <ons-navigator page="page2-1.html" var="nav2">/ons-navigator>
  </ons-template>
  <ons-template id="page2-1.html">
    <h1>page2-1</h1>
    <ons-buttoning-click="nav2.pushPage('page2-2.html')">Push</ons-button>
  </ons-template>
  <ons-template id="page2-2.html">
    <h1>page2-2</h1>
    <ons-buttoning-click="nav2.popPage()">Pop</ons-button>
  </ons-template>
  
  <ons-template id="nav3.html">
    <ons-navigator page="page3-1.html" var="nav3">/ons-navigator>
  </ons-template>
  <ons-template id="page3-1.html">
    <h1>page3-1</h1>
    <ons-buttoning-click="nav3.pushPage('page3-2.html')">Push</ons-button>
  </ons-template>
  <ons-template id="page3-2.html">
    <h1>page3-2</h1>
    <ons-buttoning-click="nav3.popPage()">Pop</ons-button>
  </ons-template>
</body>

2022-09-30 19:36

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656