第一次使用ionic时,由于没有去看官方文档,直接修改官方提供的例子,首页index.html配置如下:
<body ng-app="IndexApp" ng-controller="IndexCtrl">
<ion-content scroll="false">
<ion-side-menus enable-menu-with-back-views="false">
<!-- 首页内容start -->
<ion-side-menu-content>
<!-- 顶部导航栏start -->
<ion-nav-bar class="bar-positive"></ion-nav-bar>
<!-- 顶部导航栏end -->
<!-- 主页内容start -->
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<!-- 主页内容end -->
</ion-side-menu-content>
<!-- 首页内容end -->
</ion-side-menus>
</ion-content>
</body>
在template子页面标签下使用如下:
<ion-view view-title={{title}}>
<!-- 标题栏start -->
<ion-nav-bar>
<ion-nav-buttons side="left">
</ion-nav-buttons>
</ion-nav-bar>
<!-- 主页内容 -->
<ion-content class="stable-bg noBorder">
<!--内容-->
</ion-content>
</ion-view>
编译完成后在android页面切换正常,但在ios,点击页面切换时,标题栏颜色变了一下后,恢复正常,而且标题栏页面并没有向正文一样从右向左滚动,后面发现原因是子页面中的这个ion-nav-bar影响,子页面可以直接去掉ion-nav-bar,直接用ion-nav-button添加按钮即可。