Programmatically set active tab of ons-tabbar



  • My AngularJS app is using a tabbar design with 3 tabs.

    <ons-tabbar position="auto" var="tbrView">
        <ons-tab page="tab1.html" label="Tab 1" active></ons-tab>
        <ons-tab page="tab2.html" label="Tab 2"></ons-tab>
        <ons-tab page="tab3.html" label="Tab 3"></ons-tab>
    </ons-tabbar>
    

    It has a configuration settings ons-page that allows the user to set the default ons-tab to be set active each time the app is started and each time the ons-tabbar on the main ons-page is opened.

    // index.js
    this.defaultTab = '0'; // Can be 0, 1 or 2.
    
    <!-- settings.html -->
    <ons-list-item tappable>
      <label class="left">
        <ons-radio name="tab1" input-id="tab1" value="0" ng-model="app.defaultTab" ng-click="tbrView.setActiveTab(0)"></ons-radio>
       </label>
       <label for="tab1" class="center">
          Tab 1
       </label>
    </ons-list-item>
    
    <ons-list-item tappable>
      <label class="left">
        <ons-radio name="tab2" input-id="tab2" value="1" ng-model="app.defaultTab" ng-click="tbrView.setActiveTab(1)"></ons-radio>
       </label>
       <label for="tab2" class="center">
          Tab 2
       </label>
    </ons-list-item>
    
    <ons-list-item tappable>
      <label class="left">
        <ons-radio name="tab3" input-id="tab3" value="2" ng-model="app.defaultTab" ng-click="tbrView.setActiveTab(2)"></ons-radio>
       </label>
       <label for="tab3" class="center">
          Tab 3
       </label>
    </ons-list-item>
            
    

    Here’s the problem. I do not know where is the right place to get the tab bar to set the right tab.

    I have tried the following:

    <ons-tabbar position="auto" var="tbrView" ons-show="tbrView.setActiveTab(app.defaultTab)">
    

    This seems to make the tab bar keeps flashing whenever it is visible. Also the underline of the active tab is not rendered properly. ons-show is repeatedly triggered as long as the tab bar is visible even when the user is not interacting with it, and the page has loaded fully.

    <ons-tabbar position="auto" var="tbrView" ons-init="tbrView.setActiveTab(app.defaultTab)">
    

    ons-init is only run once upon app initialization I believe. Subsequently if I set the setting in the app and return to the page, the ons-init is not fired to switch the tab when the page is reopened.

    ons-post-change and ons-pre-change are only triggered if the user tap on another tab, so they are not useful.

    Where is the right place to set the active tab then?


  • Onsen UI

    @wetfeet init and show are page events, not tab events. You are getting those events 3 times at least, once per page inside tabbar. I think you want to do that on init event of the tabbar’s parent page. Also, check that the event is fired by that page, not a child page (there is an example here, line 5 of JS).



  • @Fran-Diox said:

    @wetfeet init and show are page events, not tab events.

    I checked the reference and ons-tabbar has these attributes. I thought the events are specific to the ons-tabbar component itself.

    I believe similarly ons-page also has the ons-init, ons-show, ons-hide attribute. source

    You are getting those events 3 times at least, once per page inside tabbar. I think you want to do that on init event of the tabbar’s parent page. Also, check that the event is fired by that page, not a child page (there is an example here, line 5 of JS).


  • Onsen UI

    @wetfeet They are just handlers for page events. This is useful if you want to do the same thing for all the pages inside a tabbar or a navigator, so you don’t need to specify ons-init in every single page.


Log in to reply