使用 material Android 主题时，如何避免导航栏之间在 Framework7 中发生的重叠？

Question

我正在使用 Framework7 构建混合移动应用程序。

但是，我的 Android 版本有问题。当我通过单击侧面菜单链接从主页转到另一个页面时，我有 headers 重叠，如图中所示。基本上index.html页的header写的"App"和about.html页的"Back"箭头重叠如下图。我怎样才能避免这种情况？
first page of app

index.html 页面 `

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- Your app title -->
    <title></title>
    <!-- Path to Framework7 iOS CSS theme styles-->
    <!--<link rel="stylesheet" href="css/framework7.ios.min.css">
    <!-- Path to Framework7 iOS related color styles -->
    <!--<link rel="stylesheet" href="css/framework7.ios.colors.min.css">-->
    <!-- Path to your custom app styles-->

    <link rel="stylesheet" href="css/my-app.css">
    <link rel="stylesheet" href="css/framework7.material.min.css">
  <link rel="stylesheet" href="css/framework7.material.colors.min.css">

  </head>
  <body>
    <!-- Status bar overlay for full screen mode (PhoneGap) -->
    <div class="statusbar-overlay"></div>
    <!-- Panels overlay-->
    <div class="panel-overlay"></div>
    <!-- Left panel with reveal effect-->
    <div class="panel panel-left panel-reveal">
      <div class="content-block">
        <p>Left panel content goes here</p>
      </div>
    </div>
    <!-- Views -->
    <div class="views">
      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <!-- Top Navbar-->
        <div class="navbar">
          <div class="navbar-inner">
            <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
            <div class="center sliding">App</div>
            <div class="right">
              <!-- 
                Right link contains only icon - additional "icon-only" class
                Additional "open-panel" class tells app to open panel when we click on this link
              -->
              <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
            </div>
          </div>
        </div>
        <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">
          <!-- Page, "data-page" contains page name -->
          <div data-page="index" class="page">
            <!-- Scrollable page content -->
            <div class="page-content">
              <p>Page content goes here</p>
              <!-- Link to another page -->
              <a href="about.html">About app</a>
            </div>
          </div>
        </div>
        <!-- Bottom Toolbar-->
        <div class="toolbar">
          <div class="toolbar-inner">
            <!-- Toolbar links -->
            <a href="#" class="link">Link 1</a>
          </div>
        </div>
      </div>
    </div>
    <!-- Path to Framework7 Library JS-->
    <script type="text/javascript" src="js/framework7.min.js"></script>
    <!-- Path to your app js-->
    <script type="text/javascript" src="js/my-app.js"></script>
  </body>
</html>

这是 about.html 页面

 <!-- Top Navbar-->
<div class="navbar">
  <div class="navbar-inner">
    <div class="left">
      <a href="#" class="back link">
        <i class="icon icon-back"></i>
        <span>Back</span>
       </a>
    </div>
    <div class="center sliding"></div>
    <div class="right">
      <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
    </div>
  </div>
</div>
<div class="pages">
  <div data-page="about" class="page">
    <div class="page-content">
      <div class="content-block">
        <p>Here is About page!</p>
        <p>Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.</p>
      </div>
    </div>
  </div>
</div> `

Answer 1

正如 Vladimir 在同一 github question, Use "Fixed" layout type 中提到的 Material 主题中的导航栏并禁用 dynamicNavbar。

编辑：

看起来有很多人抱怨同样的问题，可能是代码写错了，因为 iOS 主题的结构与 Material 不同。所以需要仔细阅读Framework7官网提供的documentation

此外，我认为您将 iOS 和 Material CSS 文件一起包含在同一页面中！这是错误的。无论如何，试试这个：

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="theme-color" content="#2196f3">
    <title>Framework7 Material</title>
    <link rel="stylesheet" href="css/framework7.material.css">
    <link rel="stylesheet" href="css/framework7.material.colors.css">
    <link href="http://fonts.googleapis.com/css?family=Roboto:400,300,500,700" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/material-icons.css">
    <link rel="icon" href="img/icon.png">
  </head>
  <body>
    <div class="statusbar-overlay"></div>
    <div class="panel-overlay"></div>
    <div class="views">
      <div class="view view-main">
        <div class="pages navbar-fixed">
          <div data-page="index" class="page">
            <div class="navbar">
              <div class="navbar-inner">
                <div class="center">Framework7</div>
                <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
              </div>
            </div>
            <div class="page-content">
              <div class="content-block-title">Welcome To Framework7</div>
              <div class="list-block">
                <ul>
                  <li>
                  <a href="page2.html" class="item-link">
                      <div class="item-content">
                        <div class="item-media"><i class="icon icon-f7"></i></div>
                        <div class="item-inner">
                          <div class="item-title">Click Me</div>
                        </div>
                      </div>
                      </a>
                      </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="js/framework7.js"></script>
    <script type="text/javascript" src="js/my-app.js"></script>
  </body>
</html>

我的-app.js

// Initialize your app
var myApp = new Framework7({
    material: true
});

// Export selectors engine
var $$ = Dom7;

// Add main View
var mainView = myApp.addView('.view-main', {
    // Enable dynamic Navbar
    dynamicNavbar: true,
});

page2.html

<div data-page="accordion" class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"><a href="index.html" class="back link icon-only"><i class="icon icon-back"></i></a></div>
      <div class="center">Accordion</div>
      <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block-title">List View Accordion</div>
    <div class="list-block accordion-list">
      <ul>
        <li class="accordion-item"><a href="#" class="item-link item-content">
            <div class="item-inner"> 
              <div class="item-title">Lorem Ipsum</div>
            </div></a>
          <div class="accordion-item-content">
            <div class="content-block">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
            </div>
          </div>
        </li>
        <li class="accordion-item"><a href="#" class="item-link item-content">
            <div class="item-inner"> 
              <div class="item-title">Nested List</div>
            </div></a>
          <div class="accordion-item-content">
            <div class="list-block">
              <ul>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner"> 
                      <div class="item-title">Item 1</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner"> 
                      <div class="item-title">Item 2</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner"> 
                      <div class="item-title">Item 3</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner"> 
                      <div class="item-title">Item 4</div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="accordion-item"><a href="#" class="item-link item-content">
            <div class="item-inner"> 
              <div class="item-title">Integer semper</div>
            </div></a>
          <div class="accordion-item-content">
            <div class="content-block">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="content-block-title">Inset Accordion</div>
    <div class="list-block accordion-list inset">
      <ul>
        <li class="accordion-item"><a href="#" class="item-link item-content">
            <div class="item-inner"> 
              <div class="item-title">Lorem Ipsum</div>
            </div></a>
          <div class="accordion-item-content">
            <div class="content-block">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
            </div>
          </div>
        </li>
        <li class="accordion-item"><a href="#" class="item-link item-content">
            <div class="item-inner"> 
              <div class="item-title">Nested List</div>
            </div></a>
          <div class="accordion-item-content">
            <div class="list-block">
              <ul>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner"> 
                      <div class="item-title">Item 1</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner"> 
                      <div class="item-title">Item 2</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner"> 
                      <div class="item-title">Item 3</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner"> 
                      <div class="item-title">Item 4</div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="accordion-item"><a href="#" class="item-link item-content">
            <div class="item-inner"> 
              <div class="item-title">Integer semper</div>
            </div></a>
          <div class="accordion-item-content">
            <div class="content-block">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

现在效果很好:)

使用 material Android 主题时，如何避免导航栏之间在 Framework7 中发生的重叠？

How can I avoid the overlap that happens in Framework7 between the navbars when using the material Android theme?

html-framework-7