framework7 入門（1）
阿新 • • 發佈：2018-11-13
views tps oot con text tabbar -c itl tro
個人認為framework7是個很好的移動端框架，自帶路由、下拉刷新、無限加載、時間線、各種dialog、環形圖等,基本能滿足大部分app的需求，可以和vue，webpack 等各種搭配。
這裏講一下純framework7
官網 framework7
下載到本地 下載地址
開始使用
demo目錄如下
index.html
<!DOCTYPE html> <html> <head> <title>My App</title> <link rel="stylesheet" href="path/to/framework7.min.css"> </head> <body>
<div id="app"> ... </div>
<script type="text/javascript" src="path/to/framework7.min.js"></script> <script type="text/javascript" src="path/to/my-app.js"></script> </body> </html>
my-app.js
初始化app
var app = new Framework7({ root: ‘#app‘, name: ‘My App‘, id: ‘com.myapp.test‘, routes: [], // ... other parameters });
如果你的項目只需要1個view
<div id="app"> ... <div class="view view-main"> <div class="page"> ... </div> </div> ... </div>
初始化 view
var mainView = app.views.create(‘.view-main‘);
如果需要多個view
<div id="app">
... <div class="views tabs ios-edges"> <!-- Toolbar --> <div class="toolbar tabbar-labels toolbar-bottom-md">
<div class="toolbar-inner">
<a href="#view-1" class="tab-link tab-link-active"> <i class="icon f7-icons ios-only lazy">home_fill</i> <i class="icon material-icons md-only">home</i> <span class="tabbar-label">首頁</span> </a>
<a href="#view-2" class="tab-link"> <i class="icon f7-icons ios-only">cloud_fill</i> <i class="icon material-icons md-only">cloud</i> <span class="tabbar-label">出行</span> </a>
<a href="#view-3" class="tab-link"> <i class="icon f7-icons ios-only">book_fill</i> <i class="icon material-icons md-only">book</i> <span class="tabbar-label">發現</span> </a>
<a href="#view-4" class="tab-link"> <i class="icon f7-icons ios-only">person_fill</i> <i class="icon material-icons md-only">person</i> <span class="tabbar-label">我的</span> </a> </div> </div>
<div id="view-1" class="view view-main tab tab-active"></div> <div id="view-2" class="view tab"></div> <div id="view-3" class="view tab"></div> <div id="view-4" class="view tab"></div> </div> </div>
註意，toolbar 和view是在同一級，
多個視圖必須用 <div class="views"> 包起來，
tabs 也是必須的，不然頁面不會切換
初始化view之前先給view添加內容，這裏沒有把內容直接寫在index.html裏，官方有各種寫法，這裏講一下 template
page1.html
<template> <div class="page"> 這裏是View1 </div> </template> <style> ... </style> <script> return{ ... } </script>
註意，template只能有一個子元素，
return{}是必須的，
你可能需要navbar、toolbar 或者 panle，都可以寫在<div class="page">裏
routes
routes:[ { path: ‘/abc1/‘, componentUrl:"pages/page1.html" }, { path: ‘/abc2/‘, componentUrl:"pages/page2.html" }, { path: ‘/abc3/‘, componentUrl:../pages/page3.html }, { path: ‘/abc4/‘, componentUrl:"pages/page4.html" } ]
初始化view
var View1=app.views.create("#view-1",{url:"/abc1/"}); var View2=app.views.create("#view-2",{url:"/abc2/"}); var View3=app.views.create("#view-3",{url:"/abc3/"}); var View4=app.views.create("#view-4",{url:"/abc4/"})
現在這個項目已經可以跑了
framework7 入門（1）