超好用的移动框架--ionic
ionic是一个轻量的手机ui库，具有速度快，界面现代化、美观等特点。
为了解决其他一些ui库在手机上运行缓慢的问题，它直接放弃了ios6和android4.1以下的版本支持，来获取更好的使用体验。
（最近正在学习移动端项目制作，本文就ionic的使用，简单示例了学习到的一些样式。）
1安装ionic1.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>
<p class="list card">
<p class="item item-avatar">
<img src="../img/222.jpg"/>
<h2>ionic demo</h2>
<p>ljy</p>
</p>
<p class="item item-image">
<img src="../img/28.jpg">
</p>
<a class="item assertive" href="#">
try ionic </a></p>
</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>
<p class="list">
<p class="item item-pider">
这是左侧菜单
</p>
<a class="item" href="#">
this is page1 </a><a class="item" href="#">
this is page2
</a><a class="item" href="#">
this is page3 </a></p>
</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制作--底部选项卡
<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);
46 $scope.myactiveslide = 0;
})
</script>
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);
46 $scope.myactiveslide = 0;
})
</script>
以上就是ionic构建侧边栏 轮播图 加载动画的方法的详细内容。