Framework7中的导航栏覆盖

Question

我正在使用Framework7 创建适用于 Android 和 iOS 的应用程序，但我遇到了问题：

当我从一个页面切换到另一个页面时，我从中调用的页面的navbar 部分并没有消失，然后第二个页面被覆盖，从而产生了不好的效果。

我添加了view，并使用以下语法初始化了dynamicNavbar 参数：

var Myview = myApp.addView("#myIdView");

这是我的代码：

index.html

<div class="views tabs toolbar-fixed theme-amber">

    <div id="my_list" class="view tab active">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="center">My App Name</div>
            </div>
        </div>
        <div class="pages navbar-fixed">
            <div data-page="my_list" class="page">
                <div class="page-content index">
                    <div class="content-block">
                        <a href="pages/my_new_page.html">
                            <div class="my_item">
                                <div class="left_content">
                                    here my content
                                </div>
                                <div class="right_content ti-angle-right">
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

my_new_page.html

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="index.html" class="ti-angle-left col_212121 back custom"></a>
        </div>
        <div class="center">
            My new navbar title
        </div>
        <div class="right"></div>
    </div>
</div>
<div class="pages navbar-fixed">
    <div data-page="my_page" class="page">
        <div class="page-content">
            my new content
        </div>
    </div>
</div>   

my-app.js

// Initialize app
var myApp= new Framework7();

// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Dom7;

// Add view
var Myview = myApp.addView("#my_list", {
    dynamicNavbar: true
});

在所附的屏幕截图中。

Answer 1

如果您仔细阅读了动态导航栏部分的 framework7 文档，您会注意到它以这些确切的词开头：

仅 iOS 主题支持动态导航栏

iOS 令人敬畏的功能之一是动态导航栏 （导航栏）。导航栏的元素会在页面中滑动和淡出 启用动态导航栏时过渡并向后滑动。

仅适用于直通式布局

它应该在视图初始化期间通过传递 dynamicNavbar: true 参数

在您的 html 代码中，您使用不能与动态导航栏共存的 navbar-fixed 类。举个例子，“my_new_page.html”的html代码应该从：<div class="pages navbar-fixed">改为<div class="pages navbar-through">。也应该对您的“index.html”代码进行相同的修改。

如果您想了解更多有关 framework7 中动态导航栏的信息，请点击以下链接：Framework7 dynamic navbar。

编辑：我还注意到你有一个声明var Myview = myApp.addView("#myIdView");。在您的 HTML 中，我看不到 ID 设置为“myIdView”的 HTML 元素，因此我看不到您希望在哪里声明它。

您可能应该进行的更多更改：

在您的 index.html 页面中尝试此更改：<div id="my_list" class="view-main tab active"> 然后转到您的 js 文件并完全像这样修改它：

// Initialize app
var myApp= new Framework7();

// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Dom7;

// Add view
var Myview = myApp.addView(".view-main", {
    dynamicNavbar: true
});