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侧边栏底部选项卡轮播图加载动画的更多相关文章

JS框架_(Bootstrap.js)实现简单的轮播图
Bootstrap框架中轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式轮播图效果: <!DOCTYPE html> <html> <head&g ...
手机端Zepto框架，利用swipejs插件做banner轮播图
一,HTML部分<div class="banner"> <div id="slider" class="swipe"&g ...
iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
用avalon框架怎么做轮播图?
avalon这个框架其实特别的小众,做个轮播图呢?在github上的例子只有一个,而且功能特别的少,有的引入的插件与avalon里面的指令又不兼容,所以找了一个owl-carousel,目前实现了移动 ...
Vue(小案例_vue+axios仿手机app)_首页（底部导航栏+轮播图+九宫格）
---恢复内容开始--- 一.前言 1.底部导航(两种做法) 2.轮播图 ...
用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
【VIP视频网站项目一】搭建视频网站的前台页面（导航栏+轮播图+电影列表+底部友情链接）
首先来直接看一下最终的效果吧: 项目地址:https://github.com/xiugangzhang/vip.github.io 在线预览地址:https://xiugangzhang.githu ...
[vuejs短文]使用vue-transition制作小小轮播图
提示本文是个人的一点小笔记,用来记录开发中遇到的轮播图问题和vue-transition问题. 会不断学习各种轮播图添加到本文当中也有可能会上线,方便看效果开始制作超简易呼吸轮播简单粗暴的使 ...
图解微信小程序---添加tabBar底部菜单，添加已做好轮播图操作
图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...

随机推荐

网络最大流dinic模板
#include<iostream> #include<cstdio> #include<cstring> #include<queue> using ...
UltraEdit注册机原理简单说明
UltraEdit注册机原理 By:大志若愚 UltraEdit 是 Windows 下一款流行的老牌文本/HEX 编辑器(非开源).UltraEdit 正被移植到 Linux 平台.该移植名为 UE ...
DataGrid当列宽超出当前宽度时，没有数据也恒有滚动条
附件是DataGrid支持滚动条的文件. 具体使用如下: 1)DataGrid使用控件模板 <Setter Property="Template" Value="{ ...
深入浅出Javascript的正则表达式
深入浅出的javascript的正则表达式学习教程阅读目录了解正则表达式的方法了解正则中的普通字符了解正则中的方括号[]的含义理解javascript中的元字符 RegExp特殊字符中的需要 ...
mogilefs分布式文件存储
MogileFS是一个开源的分布式文件存储系统,由LiveJournal旗下的Danga Interactive公司开发.Danga团队开发了包括 Memcached.MogileFS.Perlbal ...
jQuery名字冲突 noConflict()方法
今天检查项目的时候发现一个jquery变量$的控制权让渡问题,原因是: 开发这个模块的同事使用了一个日历插件,把$的控制权让出了,就导致了加载完这个页面后再加载其他页面就会报出$不是一个函数的错误. ...
POJ-3069
Saruman's Army Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10994 Accepted: 5555 D ...
(转)apache2.2.x+tomcat7.0.x集群+…
apache http server下载地址 http://httpd.apache.org/download.cgi#apache22 这里下载的是httpd-2.2.21-win32-x86-op ...
yii使用CFrom调用ajax失败的记录
在学习配置yii的CFrom的时候,发现怎么也不能让ajax生效,后来看文档后 ,终于发现了问题的所在. 问题配置文件如下 public function getUserConfig(){ retur ...
ubuntu 14.04 部署Django项目
一.购买服务器推荐 vultr的服务器,还可以_ _ _,链接:传送门操作系统建议选 ubuntu 14.04 64位二.购买域名链接:传送门三.安装相关软件 # 创建一个叫mu的用户 ro ...

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