Understanding What Happens When Toggling Pages in ons-tabbar

Ons-tabbar implements tabbars as follows:

<ons-tabbar var="tabbar"ng-controller="MainCtrl">
        <ons-tabbar-item
            var="tab1"
            icon="home"
            label = "Sales"
            page="page1.html"
            active="true"></ons-tabbar-item>
        <ons-tabbar-item
            icon="heart"
            label = "Customer List"
            page="page2.html">/ons-tabbar-item>
        <ons-tabbar-item
            icon="star"
            label = "Ranking"
            page="page3.html">/ons-tabbar-item>
        <ons-tabbar-item
            icon="gear"
            label = "Settings"
            page="page4.html">/ons-tabbar-item>
    </ons-tabbar>

For example, if you select "Customer List" and want to load the DB and display the contents when you view page2.html, what should you do?

I am processing page2.html with JavaScript, but it has not actually been processed.
I'm trying to get ready to do it, but it still doesn't.
(Is it supposed to be loaded?)

I also tried ng-controller="MainCtrl", but it only happens on first boot, and the process is different from what I expected.

monaca

2022-09-29 22:02

1 Answers

ons-tabbar has events such as prechangepostchange, so
If you write down the process, you will be able to realize the expected movement.

See here (reference) for more information

ons.bootstrap();

function fadeout() {
  $("#modal").fadeOut(1000, function(){
    modal.hide();
  });
}

ons.ready(function(){
  // Before the tab changes
  tab.on('prechange', function(event){
    $('#page').text(event.tabItem.label);
    modal.show();
  });
  // After the tab changes
  tab.on('postchange', function(event){
    varpage=event.tabItem.label;
    $('.content').text(page+'Page Contents');
    setTimeout('fadeout(),500);
  });
});

<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css"rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css"rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ons-tabbar var="tab">
  <ons-tab page="home.html" label="Home" icon="ion-home" active="true">/ons-tab>
  <ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working">/ons-tab>
  <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag">/ons-tab>
  <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog">/ons-tab>
</ons-tabbar>

<ons-template id="home.html">
  <ons-toolbar>
    <div class="center">Home</div>
  </ons-toolbar>
  
  <p style="padding-top:50px;color:#999;text-align:center"class="content"></p>
</ons-template>

<ons-template id="comments.html">
  <ons-toolbar>
    <div class="center">Comments</div>
  </ons-toolbar>
  
  <p style="padding-top:50px;color:#999;text-align:center"class="content"></p>
</ons-template>

<ons-template id="tags.html">
  <ons-toolbar>
    <div class="center">Tags</div>
  </ons-toolbar>
  
  <p style="padding-top:50px;color:#999;text-align:center"class="content"></p>
</ons-template>

<ons-template id="settings.html">
  <ons-toolbar>
    <div class="center">Settings</div>
  </ons-toolbar>
  
  <p style="padding-top:50px;color:#999;text-align:center"class="content"></p>
</ons-template>

<ons-modal var="modal" id="modal">
  <ons-iconion="ion-load-c" spin="true">/ons-icon>
  <br>br>
  Loading <span id = 'page' > </span> Page.
  <br>br>
  Please wait.
</ons-modal>

2022-09-29 22:02

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