离子导航 - 不要更新导航栏

时间:2016-11-03 09:35:51

标签: javascript html css angularjs ionic-framework

嘿伙计们,我在Ionic中创建了一个导航概念:

<ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button-clear">
        <i class="ion-arrow-left-c"></i> Back
    </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>

<script id="list.html" type="text/ng-template">
    <ion-view view-title="First page">
        <ion-content class="padding">


            <a  nav-direction="back" nav-transition="android" href="#/movie/1">
                <button class="button button-positive">
                    Tabellen
                </button>
            </a><br/><br/>

            <a nav-direction="forward" nav-transition="android" href="#/movie/1">
                <button class="button button-positive">
                    Live-Ticker
                </button>
            </a><br/><br/>

            <button class="button button-positive" ng-click="changePage()">
            Funktion
            </button>
        </ion-content>
    </ion-view>
</script>

<script id="view.html" type="text/ng-template">
    <ion-view view-title="Second page">
        <ion-content class="padding">
            <a class="button icon ion-home" href="#/tab/home"> Home</a>
        </ion-content>
    </ion-view>
</script>

http://plnkr.co/edit/h9KwSJVt5n4bEnTXkBJ2?p=preview

问题是我想使用自己的导航栏。用我的风格,文字按钮...... 另外,我不希望导航栏更新。当我立即切换页面时,导航栏会显示后退按钮并更改标题。我想保持不变...

1 个答案:

答案 0 :(得分:1)

<击> http://plnkr.co/edit/OxdP5xj3400fJmAODQxy?p=preview

<击>

只需删除ion-nav-back-button

即可

并在view-title的{​​{1}}属性中设置所需的标题

更新 -

这就是你想要的 -

http://plnkr.co/edit/dU0u6cwUQxah5E0UCvHX?p=preview

在这里,我删除了ion-view并使用了自定义栏div。 另外,您需要手动将课程ion-nav-bar设置为has-header以获得顶部填充。