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 栏可以切换页面),可以 ...
随机推荐
- bzoj 2159 Crash 的文明世界 & hdu 4625 JZPTREE —— 第二类斯特林数+树形DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2159 使用公式:\( n^{k} = \sum\limits_{i=0}^{k} S(k,i ...
- Digging-贪心
When it comes to the Maya Civilization, we can quickly remind of a term called the end of the world. ...
- ubuntu下 修改主机名
sudo gedit /etc/hostname 写入: sudo gedit /etc/hosts
- selenium上传文件，怎么操作
#通过os.path.abspath()方法,打开图片的绝对路径,然后,定位上传按钮,然后,send_keys()方法中,添加这个文件路径就可以了
- 2. nmap扫描神器总结
-----------------nmap(选项)(参数)------------------O:激活操作探测: -P0:值进行扫描,不ping主机: -PT:是同TCP的ping: -sV:探测服务 ...
- IE11浏览器中的My97日历控件刷新后无法打开问题解决办法
IE11浏览器中的My97日历控件刷新后无法打开问题解决办法 IE11浏览器中的My97日历控件刷新后无法打开问题解决办法:(谷歌浏览器下正常.IE11失效) 解决办法:1:找到WdatePick ...
- Gym - 100851A Adjustment Office（O（1）求行列和）
Adjustment Office Gym - 100851A 2 3 4 3 4 5 4 5 6 n<=10^6,q&l ...
- MySQL生成UUID
UUID函数 在MySQL中,可以用uuid()函数来生成一个UUID,如下图: replace函数 默认生成的uuid含有'-',我们可以使用replace函数替换掉'-',SQL如下: selec ...
- 关于/proc/cpuinfo文件
以上输出项的含义如下: processor :系统中逻辑处理核的编号.对于单核处理器,则课认为是其CPU编号,对于多核处理器则可以是物理核.或者使用超线程技术虚拟的逻辑核 vendor_id :CPU ...
- css中vw和vh的知识点
引用文档:http://caibaojian.com/vw-vh.html: http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-rela ...