添加tabbar後滑動菜單和附件不起作用

我試圖在同一頁上製作Sliding-menu，Tabber。一切都很好，工作良好，直到我將「Tabbar」添加到頁面中，然後頁面中的滑動菜單和ons-button都不起作用。需要幫助，這是我的代碼。添加tabbar後滑動菜單和附件不起作用

<body ng-controller="AppController"> 

<ons-navigator> 
    <ons-tabbar> 
    <ons-tab page="page1.html" icon="ion-search" label="Find a place" active="true"> 
    </ons-tab> 
    <ons-tab page="page2.html" icon="ion-heart" label="Favorites"> 
</ons-tab> 
<ons-tab page="page3.html" icon="ion-person" label="Profile"> 
</ons-tab> 
</ons-tabbar> 
</ons-navigator> 



<ons-sliding-menu 
    menu-page="menu.html" main-page="page1.html" side="left" 
    var="menu" type="reveal" max-slide-distance="260px" swipable="true"> 
</ons-sliding-menu> 

<ons-template id="menu.html"> 
<ons-page modifier="menu-page"> 
<ons-toolbar modifier="transparent"></ons-toolbar> 

<ons-list class="menu-list"> 
    <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})"> 
    <ons-icon icon="fa-plus"></ons-icon> 
    New Post 
    </ons-list-item> 

    <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})"> 
    <ons-icon icon="fa-bookmark"></ons-icon> 
    Bookmark 
    </ons-list-item> 

    <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})"> 
    <ons-icon icon="fa-twitter"></ons-icon> 
    Official Twitter 
    </ons-list-item> 
</ons-list> 

<br> 

<ons-list class="bottom-menu-list"> 
    <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})"> 
    Settings 
    <div class="notification menu-notification">3</div> 
    </ons-list-item> 

    <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})"> 
    Help 
    </ons-list-item> 

    <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})"> 
    Send feedback 
    </ons-list-item> 
</ons-list> 
</ons-page> 
</ons-template> 

<ons-template id="page1.html"> 
<ons-page> 

<ons-toolbar> 
    <div class="left"> 
    <ons-toolbar-button ng-click="menu.toggleMenu()"> 
     <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> 
    </ons-toolbar-button> 
    </div> 
    <div class="center">Page 1</div> 
</ons-toolbar> 


<ons-button modifier="cta" ng-click="menu.toggleMenu()"> 
    Toggle Menu 
</ons-button> 

</ons-page> 
</ons-template> 

<ons-template id="page2.html"> 
<ons-page> 
<ons-toolbar> 
    <div class="left"> 
    <ons-toolbar-button ng-click="menu.toggleMenu()"> 
     <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> 
    </ons-toolbar-button> 
    </div> 
    <div class="center">Page 2</div> 
</ons-toolbar> 


<ons-row style="margin-top: 100px;"> 
    <ons-col align="center"> 
    <ons-button modifier="light" ng-click="menu.toggleMenu()"> 
     Toggle Menu 
    </ons-button> 
    </ons-col> 
</ons-row> 

</ons-page> 
</ons-template> 

</body>

來源

2014-11-25 Bjm Wu

嘗試把你的TabBar模板裏面是這樣的：

<ons-template id="tabbar.html"> 
    <ons-tabbar> 
    <ons-tab page="page1.html" icon="ion-search" label="Find a place" active="true"> 
    </ons-tab> 
    <ons-tab page="page2.html" icon="ion-heart" label="Favorites"> 
    </ons-tab> 
    <ons-tab page="page3.html" icon="ion-person" label="Profile"> 
    </ons-tab> 
    </ons-tabbar> 
</ons-template>

如何使用模板作爲滑動菜單的主頁：

<ons-sliding-menu 
    menu-page="menu.html" main-page="tabbar.html" side="left" 
    var="menu" type="reveal" max-slide-distance="260px" swipable="true"> 
</ons-sliding-menu>

你可能想改變鍵入"overlay"如果您不希望滑動菜單在打開時將標籤向右推。

這裏看到這個動作： http://codepen.io/argelius/pen/NPqawd

來源

2014-11-26 04:50:15

我的天啊！這正是我想要的。非常感謝！！ – 2014-11-26 14:09:56

添加tabbar後滑動菜單和附件不起作用

回答

相關問題