webAPP制作框架Ionic--构建APP侧边栏底部选项卡轮播图加载动画

超好用的移动框架--Ionic

Ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。

为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验。

（最近正在学习移动端项目制作，本文就Ionic的使用，简单示例了学习到的一些样式。）

1安装ionic

1.HBuilder创建APP项目，导入ionic的css，js（fonts）文件。

2.导入ionic.css和ionic.bundle.js文件。

2使用ionic框架提供的样式进行APP制作--侧滑菜单

1.HTML代码

<body ng-app="todo">

  <ion-side-menus>

    <!-- 中心内容 -->

    <ion-side-menu-content>

      <ion-header-bar class="bar-dark">

        <h1 class="title">Ionic</h1>

      </ion-header-bar>

      <ion-content>

          <div class="list card">

  <div class="item item-avatar">

    <img src="../img/222.jpg"/>

    <h2>Ionic Demo</h2>

    <p>LJY</p>

  </div>

  <div class="item item-image">

    <img src="../img/28.jpg">

  </div>

  <a class="item  assertive" href="#">

    Try Ionic

  </a>

</div>

      </ion-content>

    </ion-side-menu-content>

    <!-- 左侧菜单 -->

    <ion-side-menu side="left">

      <ion-header-bar class="bar-dark">

        <h1 class="title">Projects</h1>

      </ion-header-bar>

      <div class="list">

  <div class="item item-divider">

   这是左侧菜单

  </div>

  <a class="item" href="#">

    This is  page1

  </a>

<a class="item" href="#">

    This is  page2

  </a>

<a class="item" href="#">

    This is  page3

  </a>

</div>

    </ion-side-menu>

  </ion-side-menus>

<script type="text/javascript" src="../js/app.js"></script>

    </body>

2.js

angular.module('todo', ['ionic'])

这样就实现了简单的主页和侧边菜单的制作。

3使用ionic框架提供的样式进行APP制作--底部选项卡

                 <ion-tabs class="tabs-positive tabs-icon-only">

                     <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">

                         <ion-header-bar class="bar royal-bg">

                             <h1 class="title royal-bg">Ionic</h1>

                         </ion-header-bar>

                         <ion-content>

                             <ion-scroll direction="y" style="width: 100%;height:auto;">

                                 <div class="list card">

                                     <div class="item item-avatar">

                                         <img src="../img/222.jpg" />

                                         <h2>Ionic Demo</h2>

                                         <p>LJY</p>

                                     </div>

                                     <div class="item item-image">

                                         <img src="../img/2852185939109769629.jpg">

                                     </div>

                                     <a class="item  assertive" href="#" on-tap="aaa()">

                                         Try Ionic

                                     </a>

                                 </div>

                                 <div class="list">

                                     <div class="item item-input item-select">

                                         <div class="input-label">

                                             Lightsaber

                                         </div>

                                         <select>

                                             <option>Blue</option>

                                             <option selected="">Green</option>

                                         </select>

                                     </div>

                                 </div>

                             </ion-scroll>

                         </ion-content>

                         <!-- 标签 1 内容 -->

                     </ion-tab>

                     <ion-tab title="2">

                         <ion-header-bar class="bar royal-bg">

                             <h1 class="title royal-bg">标签 2 </h1>

                         </ion-header-bar>

                         <h1>内容2222222222222222222222222222222222222</h1>

                     </ion-tab>

                     <ion-tab title="3">

                         <ion-header-bar class="bar royal-bg">

                             <h1 class="title royal-bg">标签3</h1>

                         </ion-header-bar>

                         <h1>内容 3333333333333333333333333333333333333333</h1>

                     </ion-tab>

                 </ion-tabs>

2使用ionic框架提供的样式进行APP制作--图片轮播及加载动画

     <div>

                     <ion-slide-box active-slide="myActiveSlide" does-continue="true" slide-interval="1000">

                         <ion-slide>

                             <div class="box blue" on-tap="aaa()">

                                 <h1>BLUE</h1></div>

                         </ion-slide>

                         <ion-slide>

                             <div class="box yellow">

                                 <h1>YELLOW</h1></div>

                         </ion-slide>

                         <ion-slide>

                             <div class="box pink">

                                 <h1>PINK</h1></div>

                         </ion-slide>

                     </ion-slide-box>

                 </div>

 <script>

         angular.module('todo', ['ionic'])

             .controller("todo", function($scope, $timeout, $ionicLoading) {

                 // 页面加载动画

                 $ionicLoading.show({

                     content: 'Loading',

                     animation: 'fade-in',

                     showBackdrop: true,

                     maxWidth: 200,

                     showDelay: 0

                 });

                 // 设置加载动画结束时间

                 $timeout(function() {

                     $ionicLoading.hide();

                     $scope.stooges = [{

                         name: 'Moe'

                     }, {

                         name: 'Larry'

                     }, {

                         name: 'Curly'

                     }];

                 }, 400);

                  $scope.myActiveSlide = 0;

             })

     </script>

目前还在学习制作中，感觉Ionic还是比较好用的一个框架，提供了比较多的功能和样式。

巴特西

webAPP制作框架Ionic--构建APP侧边栏底部选项卡轮播图加载动画

1安装ionic

2使用ionic框架提供的样式进行APP制作--侧滑菜单

3使用ionic框架提供的样式进行APP制作--底部选项卡

2使用ionic框架提供的样式进行APP制作--图片轮播及加载动画

最新文章

热门文章

巴特西

webAPP制作框架Ionic--构建APP侧边栏 底部选项卡 轮播图 加载动画

1安装ionic

2使用ionic框架提供的样式进行APP制作--侧滑菜单

3使用ionic框架提供的样式进行APP制作--底部选项卡

2使用ionic框架提供的样式进行APP制作--图片轮播及加载动画

最新文章

热门文章

webAPP制作框架Ionic--构建APP侧边栏底部选项卡轮播图加载动画