gpt4 book ai didi

javascript - Framework7 和 Material Design : Styling not rendered

转载 作者:行者123 更新时间:2023-11-29 18:37:35 24 4
gpt4 key购买 nike

我正在使用 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>

最佳答案

发生此问题是因为您不是初始化应用程序,也没有设置应用程序包装器,让我们检查一下 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开始嵌套在 tourialpoint 网站上。

引用:

Init F7 App

App Layout

关于javascript - Framework7 和 Material Design : Styling not rendered,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53680207/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com