超好用的移动框架--Ionic--构建APP侧边栏底部选项卡轮播图加载动画 - undeceive_H5之家

超好用的移动框架--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代码

IonicIonic DemoLJY Try Ionic Projects 这是左侧菜单 This is page1 This is page2 This is page3

2.js

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

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

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

IonicIonic DemoLJY Try Ionic Lightsaber BlueGreen标签 2 内容2222222222222222222222222222222222222标签3内容 3333333333333333333333333333333333333333设置这是隐藏在头部下面的 This is page1 This is page3 ]) ($scope) { () { } () { ) 122 123 } () { ) 126 127 } 128 })

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

BLUEYELLOWPINK]) ($scope, $timeout, $ionicLoading) { $ionicLoading.show({ , , , , }); () { 32 $ionicLoading.hide(); [{ }, { }, { }]; ); ; 47 })

目前还在学习制作中，感觉Ionic还是比较好用的一个框架。

超好用的移动框架--Ionic--构建APP侧边栏 底部选项卡 轮播图 加载动画 - undeceive

超好用的移动框架--Ionic--构建APP侧边栏底部选项卡轮播图加载动画 - undeceive