Question

我有一个多线工具栏。代码如下：

<ons-page id="prodotti">

<ons-toolbar fixed-style id="firstNav" class="first-line">
    <div class="left">
        <img src="dist/img/logo.png">
    </div>
    <div class="right">
        <ons-toolbar-button onclick="myNav.pushPage('profilo.html')">
            <ons-icon icon="ion-person" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
        <ons-toolbar-button onclick="myNav.pushPage('carrello.html')">
            <ons-icon icon="ion-android-cart" size="28px" fixed-width="false"><span class="notification">1</span></ons-icon>
        </ons-toolbar-button>
    </div>

    <div class="second-line navigation-bar" id="secondNav">
        <div class="navigation-bar__left">
            <span class="toolbar-button navigation-bar__line-height" onclick="menu.toggle()">
                <i class="ion-navicon"
            style="font-size:28px; vertical-align:-6px;"></i>
            </span>
        </div>

    </div>
</ons-toolbar>

我的所有页面都有一个像这样的工具栏。现在我有一个问题。当我使用带有动画的pushPage时：幻灯片#secondNav似乎没有动画。它会在动画结束后改变。我如何实现幻灯片到这个元素？

谢谢！

Answer 1

您的代码中存在一些错误。 ons-toolbar仅接受{= 1}}代码，其中class = left，center或right。您的div将永远不会显示。要创建双线工具栏，只需使用两个不同的工具栏。在您的代码中缺少导航器，我在<div class="second-line navigation-bar" id="secondNav">页面上添加了它。您还忘了在最后添加first标记。

Here你可以找到一个有效的CodPen示例，这是你修改过的代码：

</ons-page>

温泉 - pushPage动画

1 个答案: