标签：abs tar out 入门 png 使用 app webpack doctype
个人认为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:[ { path: ‘/abc1/‘, componentUrl:"pages/page1.html" }, { path: ‘/abc2/‘, componentUrl:"pages/page2.html" }, { path: ‘/abc3/‘, componentUrl:../pages/page3.html }, { path: ‘/abc4/‘, componentUrl:"pages/page4.html" } ]
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/"})
现在这个项目已经可以跑了
标签：abs tar out 入门 png 使用 app webpack doctype
原文地址：https://www.cnblogs.com/yabolahan/p/9952878.html
