超好用的移动框架–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代码
Ionic
@@##@@
Ionic Demo
LJY
@@##@@
Try IonicProjects
这是左侧菜单
This is page1 This is page2 This is page3
登录后复制
2.js
angular.module('todo', ['ionic'])
登录后复制
这样就实现了简单的主页和侧边菜单的制作。
3使用ionic框架提供的样式进行APP制作–底部选项卡
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; })BLUE
YELLOW
PINK
登录后复制登录后复制
2使用ionic框架提供的样式进行APP制作–图片轮播及加载动画
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; })BLUE
YELLOW
PINK
登录后复制登录后复制
以上就是Ionic构建侧边栏 轮播图 加载动画的方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3195083.html
