Framework7(02:Get Start)

2019年6月7日 304次阅读 来源: 廖马儿

1.下载安装Framework7

在下载/安装好的目录下，我们需要的文件都在 dist/ 目录下

2.创建项目

这个页面的Basic App layout可以见代码： http://framework7.io/get-started/

创建入口文件：index.html
引入：
“ <link rel="stylesheet" href="path/to/framework7.ios.min.css">

<link rel="stylesheet" href="path/to/framework7.ios.colors.min.css">

<script type="text/javascript" src="path/to/framework7.min.js"></script>

3.初始化APP

我们写好布局，引用了 Framework7 的JS和CSS之后，我们需要初始化 APP 和 View.
在我们的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 mainView = myApp.addView('.view-main', { 
// Because we want to use dynamic navbar, we need to enable it for this view: 
    dynamicNavbar: true
});

4.新建about页面：

`about.html`文件

请看http://framework7.io/get-started/ 的Another page
注意这句注释：“

this page will be parsed with Ajax, 也不用再加入.navbar 和.page

5.给about页面添加JS代码

假设我们需要在 about 页面中执行JS代码。
因为 about.html页面是通过JS加载的，我们不能通过在 about.html中添加 <script>标签的方式来添加JS代码，因为script标签会直接被忽略。所说，Framework7 提供了简单的回调函数，我们可以在 my-app.js中使用：

详情见： http://framework7.io/get-started/ 的Scripts for specific page下得代码

注意：Framework7是通过Ajax在不同页面间跳转的

附一张自己的demo目录：

《Framework7(02:Get Start)》 屏幕快照 2016-12-17 下午2.19.55.png

QQ交流群：548512517

    原文作者：廖马儿
    原文地址: https://www.jianshu.com/p/ed389fd8bed2
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞