framework7 入门（基础布局）

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

这里讲一下纯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/"})

现在这个项目已经可以跑了