Framework7 和 Material Design：样式未呈现

Question

我正在使用 Framework7 构建我的第一个 Android 应用程序。但是，当我使用 https://www.tutorialspoint.com/framework7/navbar_basic.htm 中提供的示例并使用与最新版本的 Framework7（3.6.0 而不是 1.4.2）对应的 CDN 时，我的网页只是呈现为 HTML，没有任何样式随便。

我的代码：

<!DOCTYPE html>
<html class="with-statusbar-overlay">
   <head>
      <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">
      <title>Notifications</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/3.6.0/css/framework7.min.css">
   </head>
   <body>
      <div class="views">
         <div class="view view-main">
            <div class="pages navbar-fixed">
               <div data-page="home" class="page">
                  <div class="navbar">
                     <div class="navbar-inner">
                        <div class="center">Notifications</div>
                     </div>
                  </div>
                  <div class="page-content">
                     <div class="content-block">
                        <p><a href="#" class="button button-raised notification-single">Single-line notification</a></p>
                        <p><a href="#" class="button button-raised notification-multi">Multi-line notification</a></p>
                        <p><a href="#" class="button button-raised notification-custom">With custom button</a></p>
                        <p><a href="#" class="button button-raised notification-callback">With callback on close</a></p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/3.6.0/js/framework7.min.js"></script>
      <script>
      </script>
   </body>
</html>

Answer 1

发生此问题是因为您不是初始应用程序，也没有设置 App Wrapper，让我们检查一下 example

您可以在这里找到 F7 的应用程序初始化：

var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: 'left',
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});

应用程序 Html 布局：

<div id="app">
<div class="views">
         <div class="view view-main">
            <div class="pages navbar-fixed">
               <div data-page="home" class="page">
                  <div class="navbar">
                     <div class="navbar-inner">
                        <div class="center">Notifications</div>
                     </div>
                  </div>
                  <div class="page-content">
                     <div class="content-block">
                        <p><a href="#" class="button button-raised notification-single">Single-line notification</a></p>
                        <p><a href="#" class="button button-raised notification-multi">Multi-line notification</a></p>
                        <p><a href="#" class="button button-raised notification-custom">With custom button</a></p>
                        <p><a href="#" class="button button-raised notification-callback">With callback on close</a></p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
</div>

注意：建议您从here嵌套的tourtrialpoint网站开始。

参考：

Init F7 App

App Layout

Framework7 和 Material Design：样式未呈现

Framework7 and Material Design: Styling not rendered

html

javascript

css

android

html-framework-7