关于ion-nav-bar标签对页面切换的影响

最新推荐文章于 2022-11-08 10:42:16 发布

原创最新推荐文章于 2022-11-08 10:42:16 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic

ionic 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个在使用Ionic框架开发应用时遇到的问题：在iOS设备上，页面切换时标题栏的颜色会发生短暂变化，且不会随内容一起滑动。问题的根源在于子页面中的ion-nav-bar组件，并提供了解决方案。

第一次使用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添加按钮即可。