ionic——入门

ionic——入门

一、ionic的简介：ionic是一个用来开发混合手机应用的，开源的，免费的代码库。可以优化html、css和js的性能，构建高效的应用程序，而且还可以用于构建Sass和AngularJS的优化。ionic会是一个可以信赖的框架。

ionic引用的文件：大概需要两种这样的文件

 <link rel="stylesheet" href="js/lib/ionic1/css/ionic.min.css">//js文件夹下的lib文件下的文件
    <script src="js/lib/ionic1/js/ionic.bundle.min.js"></script>

注意 注意：还必须要写上

 <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

移动端开发，页面上的样式基本上是固定的，ionic一般有以下的内容：

首先是页头：

    .bar : 工具栏样式
         .bar-header： 页头工具栏样式
         .bar-positive：工具栏颜色样式
         .title：设置标题

页头的代码内容：

 <div class="bar bar-header bar-positive">
        <h1 class="title">页面头部</h1>
    </div>

          其次是内容：

    .scroll-content：设置页面内容
          .has-header：界面中是否包含页头

内容的代码：

   <div class="scroll-content has-header">
        页面内容
    </div>

最后是页脚：

    .bar-footer： 页脚
         .bar-dark：工具栏颜色样式

页脚的代码：

<div class="bar bar-footer bar-dark">
        <h1 class="title">页面底部</h1>
    </div>

二、移动端开发过程中，内容主要显示在页头和页脚中间用于浏览的视图工具

ionic关于内容的处理，主要提供了两个样式：

1 .content 样式，是使用相对定位来进行内容处理的，它一般使用在内容不需要滚动的情况下

2 .scroll-content 样式，是使用绝对定位来进行内容处理的，、 通常情况下用在页面的内容需要滚动展示的情况下

关于内容的展示，会出现以下的问题:

1、某些app包含页面头部，某些app不包含页面头部

解决问题：

  .has-header 样式：用于内容设置top来排除页头占用的空间
        .has-subheader 样式：用于内容设置top来排序副标题占用的空间

代码为例：

  <!-- 页头 -->
    <div class="bar bar-header bar-assertive">
        <h1 class&