framework7 入门（基础布局）

时间：2022-09-01 10:35:39

个人认为framework7是个很好的移动端框架，自带路由、下拉刷新、无限加载、时间线、各种dialog、环形图等,基本能满足大部分app的需求，可以和vue，webpack 等各种搭配。

这里讲一下纯framework7

官网 framework7

下载到本地 下载地址

开始使用

demo目录如下

framework7 入门（基础布局）

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. （二）cordova&plus;framework7入门——笑笑APP

    [前言] framework7确实做的很赞,但是一直各种原因没有做什么app, 这个感觉就像大厨遇到百年难见的好材料,不炒个菜憋的慌, 机缘巧合周一周二两个晚上做了一个简单app,先看下效果: ios ...

  2. HTML入门基础教程相关知识

    HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...

  3. 第六十九节，css入门基础

    css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...

  4. CSS入门基础学习二

    我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...

  5. 【Flutter学习】页面布局之基础布局组件

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  6. 超实用的Flask入门基础教程，新手必备！

    Flask入门基础教程 Flask简介 Flask是一个轻量级的可定制框架,使用Python语言编写,较其他同类型框架更为灵活.轻便.安全且容易上手.它可以很好地结合MVC模式进行开发,开发人员分工合 ...

  7. mybatis入门基础&lpar;二&rpar;----原始dao的开发和mapper代理开发

    承接上一篇 mybatis入门基础(一) 看过上一篇的朋友,肯定可以看出,里面的MybatisService中存在大量的重复代码,看起来不是很清楚,但第一次那样写,是为了解mybatis的执行步骤,先 ...

  8. Entity Framework7 入门之全功能&period;NET版本下使用EF7（含源码）另附数据迁移常见错误处理

    Entity Framework7 入门之全功能.NET(Console, WinForms, WPF等)使用EF7 昨天,我们介绍了EF的新特性和开发计划,如果你还不了解,请移步 Entity Fr ...

  9. 01shell入门基础

    01shell入门基础 为什么学习和使用shell编程 shell是一种脚本语言,脚本语言是相对于编译语言而言的.脚本语言不需要编译,由解释器读取程序并且执行其中的语句,而编译语言需要编译成可执行代码 ...

  10. Markdown入门基础

    // Markdown入门基础 最近准备开始强迫自己写博文,以治疗严重的拖延症,再不治疗就“病入骨髓,司命之所属,无奈何”了啊.正所谓“工欲善其事,必先利其器”,于是乎在写博文前,博主特地研究了下博文 ...

随机推荐

  1. jq选择器基础

    Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...

  2. 【JavaScript Demo】回到顶部功能实现

    随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...

  3. ReactiveCocoa源码拆分解析&lpar;六&rpar;

    (整个关于ReactiveCocoa的代码工程可以在https://github.com/qianhongqiang/QHQReactive下载) RAC为了实现优雅的信号绑定,可谓使尽浑身解数,不仅 ...

  4. 用Java实现网络爬虫

    myCrawler.java package WebCrawler; import java.io.File; import java.util.ArrayList; import java.util ...

  5. Node&period;JS模块系统

    1.什么是模块? 为了让Node.js的文件可以相互调用,Node.js提供了一个简单的模块系统. 模块是Node.js 应用程序的基本组成部分,文件和模块是一一对应的.换言之,一个 Node.js ...

  6. Context&period;js 右键菜单

    ContextJS is a lightweight solution for contextual menus. Currently, there are two versions. The fir ...

  7. Android弹出选项框及指示箭头动画选择

     Android弹出选项框及指示箭头动画选择 Android原生的Spinner提供了下拉列表选项框,但在一些流行的APP中,原生的Spinner似乎不太受待见,而通常会有下图所示的下拉列表选项框 ...

  8. 要在一般处理程序中获取其他页面的session值

    1.要在一般处理程序中获取其他页面的session值,需要引用名空间: using System.Web.SessionState; 2.然后继承一个接口:IRequiresSessionState, ...

  9. Android应用加入微信分享

    一.申请你的AppID http://open.weixin.qq.com/ 友情提示:推荐使用eclipse打包软件最后一步的MD5值去申请AppID 二.官网下载libammsdk.jar包 ht ...

  10. javascript综合小案例，校验用户注册信息提交

    完成这个综合小案例,对于html.css.javascript的大部分内容复习快结束了. 这里做一个小案例--要实现的功能,以一张图片的形式给出: 首先,写出提交数据之后进入的页面代码: <!D ...

相关文章