0

表題の通り、スライドメニューとタブバーを併用したいのですが、できるのでしょうか。

現在Monacaのスライドメニューサンプルアプリを元に、ナビ付きタブバーのコードを組み合わせてみたのですが、スライドメニューが表示されません。

いろいろ検索してみたのですが、該当するものが見当たりませんでしたので、宜しくお願い致します。

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

1 件の回答 1

1

ons-sliding-menuの中にons-tabbarを入れたら動きました。

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>

ただ、これだけだとスライドメニューを選択してもページが切り替わらないようです。
※おそらく各タブバーがページを持っているため。

menu.htmlを下記のように変更したらスライドメニューでページが変わるようになりました。

menu.html

変更前(スライドメニューのメインページを設定)

<ons-list-item
    modifier="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>

変更後(タブバーのアクティブタブを設定)

<ons-list-item
    modifier="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>

注意事項:
とりあえず動作確認できたレベルの実装なので参考程度にしていただいた方が良いと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。