我正在使用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>
答案 0 :(得分:2)
发生此问题是因为您不是Init应用,也没有设置应用包装,请检查此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开始嵌套toutrialpoint网站。
参考: