framework7 v6.0 入门知识

最新文档地址，注意framework7的版本号

https://framework7.io/docs/

一、框架两个主要文件

（一）framework7-bundle.min.js
（二）framework7-bundle.min.css

二、实例化framwork7

（一）路由设置

1、注意引入模块有url，componentUrl，还要异步等方式
2、多级路径必要参数：（父页面）master，（子页面路径参数）detailRoutes

//路由设置
var routes = [{//路径名称path: '/home/', //文件地）url: './pages/home.html',
},{//多级页面，设置多级路由path: '/detail/',url: './pages/detail.html',master: true,options: {animate: false,},detailRoutes: [{path: '/dynamic-route/blog/:blogId/post/:postId/',componentUrl: './pages/dynamic-route.html',}],
}, {//默认路由，匹配所有页面path: '(.*)',url: './404.html',
}];

（2）设置基本参数，如：主要容器（el），主题（theme）,缓存（cache）,是否开启多级路由等等

//参数设置
var options = {// 项目名称name: 'My App',//主题设置theme: 'auto',//主要容器el: '#app',//文件缓存cache: false,//多级路由缓存，在多页面返回起到关键作用view: {stackPages: true},//路由routes
}

（二）实例化framework7

//实例化framework7
var app = new Framework7(options)

三、页面结构

如果很好的使用framework7 提供的样式和动效，一定要严格按照他们提要的结构来组织代码

<!--设置主要容器-->
<div id="app"><!--设置主要视图区域：view view-main--><div class="view view-main view-init safe-areas"><!--设置内容区域：page--><div class="page" data-name="home"><!--设置内容展示区域：page-content--><div class="page-content"><!--添加一个按钮，添加样式:class="button button-fill"--><button class="button button-fill">Button</button></div></div></div>
</div>

四、组件

<template><div class="page"><div class="navbar"><div class="navbar-bg"></div><div class="navbar-inner sliding"><div class="left"><a href="#" class="link back"><i class="icon icon-back"></i><span class="if-not-md">Back</span></a></div><div class="title">Component Page</div></div></div><div class="page-content"><div class="block-title">Events Handling</div><div class="block block-strong"><a href="#" class="button button-raised" @click=${openAlert}>Open Alert</a></div><div class="block-title">Page Component Data</div><div class="block block-strong"><p>Hello! My name is ${name}. I am ${age} years old.</p><p>I like to play:</p><ul>${likes.map((item) => $h`<li>${item}</li>`)}</ul></div><div class="block-title Js-title">Extended Context 1</div><f7-link class="setPsd" href="/detail/" ref="setPsd" text="设置密码"></f7-link><div class="block block-strong"><p>Component page context as Template7 page context is also extended with some additional variables.</p><h4>$f7route</h4><p>Contains properties of the current route:</p><ul style="padding-left:25px"><li><b>$f7route.url</b>: ${$f7route.url}</li><li><b>$f7route.path</b>: ${$f7route.path}</li><li><b>$f7route.params</b>: ${JSON.stringify($f7route.params.blogid)}</li><li><b>$f7route.hash</b>: ${$f7route.hash}</li><li><b>$f7route.query</b>: ${JSON.stringify($f7route.query)}</li></ul><!-- link as button --><button class="button button-fill">Button</button><h4>$theme</h4><p>Currently active theme:</p><ul style="padding-left:25px"><li><b>$theme.ios</b>: ${$theme.ios}</li><li><b>$theme.md</b>: ${$theme.md}</li><li><b>$theme.aurora</b>: ${$theme.aurora}</li></ul></div></div></div>
</template>
<style scoped>p {color: red;}a {text-decoration: none;}
</style>
<script>export default function(props, {$f7,$on,$onBeforeMount,$onMounted,$onBeforeUnmount,$onUnmounted}) {let name = '一叶知秋';let age = 34;let likes = ['台球', '小提琴', '书法'];let data = props;//组件一旦view，就不能返回了var mainview = app.views.create('.view-main');const openAlert = () => {$f7.dialog.alert('Hello World', function() {// mainview.router.back('/form/', {//     force: true// });mainview.router.navigate('/form/', {reloadCurrent: true,ignoreCache: true,});// console.log('ok');});}return $render;}
</script>

framework7 入门知识相关推荐

java圆周率流程图,流程图、PI图入门知识课件.doc
流程图.PI图入门知识课件流程图.PI图入门知识基本定义工艺流程图﹙又叫PI图﹚,通过图解的形式,表示出在化工生产过程中,由原料制得产品过程的物料和能量发生的变化及其流向:表示出生产中采用的化 ...
和与余数的和同余理解_5 同余 ——数论入门知识讲解系列
数学竞赛数论是纯粹数学的分支之一,主要研究整数的性质,按研究方法分为初等数论和高等数论.中学生(甚至小学生)课外数学兴趣小组的许多内容是属于初等数论的,各级别数学竞赛也会把初等数论作为重点内容进行考 ...
python 快速排序_小白入门知识详解：Python实现快速排序的方法（含实例代码）...
前言: 今天为大家带来的内容是:小白入门知识详解:Python实现快速排序的方法(含实例代码)希望通过本文的内容能够对各位有所帮助,喜欢的话记得点赞转发收藏不迷路哦!!! 提示: 这篇文章主要介绍了P ...
oracle入门知识实施,新手必须了解的oracle入门知识
欢迎进入Oracle社区论坛,与200万技术人员互动交流 >>进入 oracle入门知识一个表空间只能属于一个数据库每个数据库最少有一个控制文件(建议3个,分别放在不同的磁盘上) 每个数 ...
ruby网站部署到服务器,入门知识: 把代码部署到服务器， SSH
入门知识: 把代码部署到服务器, SSH 2015-07-28 16:28 访问量: 2868 分类: 技术如何登陆远程服务器呢? $ ssh root@your.server.com -p 334 ...
python自学需要哪些基础知识-零基础学Python应该学习哪些入门知识及学习步骤安排...
众所周知,Python以优雅.简洁著称,入行门槛低,可以从事Linux运维.Python Web网站工程师.Python自动化测试.数据分析.人工智能等职位!就目前来看,Python岗位人才缺口高达4 ...
学python需要什么基础知识-学习Python需要知道哪些基础入门知识？
众所周知,Python以优雅.简洁著称,入行门槛低,可以从事Linux运维.Python Web网站工程师.Python自动化测试.数据分析.人工智能等职位!就目前来看,Python就业前景广阔.很多 ...
python自学步骤-零基础学Python应该学习哪些入门知识及学习步骤安排
众所周知,Python以优雅.简洁著称,入行门槛低,可以从事Linux运维.Python Web网站工程师.Python自动化测试.数据分析.人工智能等职位!就目前来看,Python岗位人才缺口高达4 ...
MySql入门知识（一）
概述 MySQL是一个真正多用户,多线程结构化查询语言数据库服务器.MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司.MySQL的SQL语言是用于访问数据 ...

framework7 入门知识