在抽屉侧菜单内容区域内具有状态转换的离子奇怪行为

时间:2016-01-27 19:28:58

标签: css angularjs ionic-framework

我正在使用cordova设计手机应用程序。我已经取得了一些很好的进展,我可以在我的侧边菜单内容之间进行状态转换,同时还有抽屉工作。我设计界面的方式是侧面抽屉和标题栏加载一次,侧面菜单内容是状态转换区域。我无法将我的内容显示在标题栏下方,所以我将其填充下来。然而问题是当我向状态转换动画垫下推时,奇怪的是我在标签中测试了menu-close指令,所以看起来填充区域保持了前面菜单内容的状态。我不想使用菜单关闭,所以我不会重置我的州的历史堆栈。

<ion-side-menus  animation="no-animation" enable-menu-with-back-views ="true" >
<!--Ion Side Menu Content Houses the content for the main page-->
<ion-side-menu-content style="padding-top:45px">


<div menu-close style="padding-top:59px" >
<ion-nav-view > --Here
</ion-nav-view>    
</div>


 <ion-header-bar class ="bar-balanced">
 <div class ="buttons">
     <button class ="button icon button-clear ion-navicon-round" ng-click="openDrawer()"></button>
    </div>
    <h1 class="title" style="text-align: center">Medroid</h1>
    <div class="buttons widget-container content-area horiz-area  wrapping-col" > 
    <button class ="button" ng-click="openPopover($event)" ng-controller = "notificationPopoverCtrl">
        <i class ="icon button-dark ion-ios-bell"></i></button>
        <button class ="button" ng-click="openPopover($event)" ng-controller ="InboxPopoverCtrl"><i class ="icon button-dark ion-email"></i> </button> 
         <button class ="button" ng-click="changeStatus()"><i class     ="icon ion-ios-circle-filled {{statuscolor}}"></i>{{docstatus}}</button> 
    </div>
</ion-header-bar>
</ion-side-menu-content>
<!--Ion Side menu drawer content-->
<ion-side-menu side ="left">
<ion-header-bar class ="bar-positive">
<h1 class="title" style="text-align: center" >Menu</h1>
</ion-header-bar>
</ion-side-menu>
</ion-side-menus>

这是我的plunker链接,我已经实现了这一点。 Plunker

非常感谢您的帮助

干杯,

1 个答案:

答案 0 :(得分:1)

通过移除顶部填充并用边缘顶部替换它来解决问题。

<ion-nav-view style ="margin-top:43px">