I want to use the slide menu and tab bar in the Monaca Onsen UI.

As the title suggests, I would like to use the slide menu and tab bar together, but is it possible?

Currently, I have tried combining the code of the navigated tab bar based on Monaca's slide menu sample app, but the slide menu does not appear.

I've searched many things, but I couldn't find the corresponding one. Thank you for your cooperation.

<ons-tabbar var="tabbar">
  <ons-tabbar-item icon="home" label="Home" page="page1.html"active="true">/ons-tabbar-item>
  <ons-tabbar-item icon="comment" label="Comments" page="comments.html">/ons-tabbar-item>
  <ons-tabbar-item icon="gear" label="Settings" page="settings.html">/ons-tabbar-item>
</ons-tabbar>
<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay"max-slide-distance="200px">
</ons-sliding-menu>

monaca onsen-ui

2022-09-30 13:51

1 Answers

I put ons-sliding-menu in ons-tabbar and it worked.

index.html

<body>
    <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" side="left" type="overlay"max-slide-distance="200px">
        <ons-tabbar var="app.tabbar">
            <ons-tabbar-item
                icon="home"
                label="Home"
                page="page1.html"
                active="true"></ons-tabbar-item>
            <ons-tabbar-item
                icon="comment"
                label = "Comments"
                page="page2.html">/ons-tabbar-item>
            <ons-tabbar-item
                icon="gear"
                label = "Settings"
                page="page3.html">/ons-tabbar-item>
        </ons-tabbar>
    </ons-sliding-menu>
</body>

However, it seems that the page will not be switched even if you select the slide menu.
おそらくMaybe because each tab bar has a page.

After changing the menu.html as shown below, the slide menu now changes the page.

menu.html

Before Changes (Set Slide Menu Main Page)

<ons-list-item
    modify="tappable" class="list_item__line-height"
    onclick="app.slidingMenu.setMainPage('page1.html', {closeMenu:true})">
    <i class="fa fa-home fa-lg" style="color:#666"></i>
    &nbsp; Page 1
</ons-list-item>

After the change (set the active tab in the tab bar)

<ons-list-item
    modify="tappable" class="list_item__line-height"
    onclick="app.tabbar.setActiveTab(0), app.slidingMenu.closeMenu()">
    <i class="fa fa-home fa-lg" style="color:#666"></i>
    &nbsp; Page 1
</ons-list-item>

Note:
For the time being, the implementation is at the level where we were able to confirm the operation, so I think it would be better to use it as a reference only.

2022-09-30 13:51

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