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

枕上诗书闲处好，门前风景雨来佳。这篇文章主要讲述超好用的移动框架--Ionic--构建APP侧边栏底部选项卡轮播图加载动画相关的知识，希望能为你提供帮助。
超好用的移动框架--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> < div class="list card"> < div class="item item-avatar"> < img src="https://www.songbingjia.com/img/222.jpg"/> < h2> Ionic Demo< /h2> < p> LJY< /p> < /div> < div class="item item-image"> < img src="https://www.songbingjia.com/img/28.jpg"> < /div> < a class="itemassertive" href="https://www.songbingjia.com/android/#"> 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="https://www.songbingjia.com/android/#"> This ispage1 < /a> < a class="item" href="https://www.songbingjia.com/android/#"> This ispage2< /a> < a class="item" href="https://www.songbingjia.com/android/#"> This ispage3 < /a> < /div> < /ion-side-menu> < /ion-side-menus> < script type="text/javascript" src="https://www.songbingjia.com/js/app.js"> < /script> < /body>

2.js

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

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

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

文章图片

1 < !DOCTYPE html> 2 < html> 3 4< head> 5< meta charset="UTF-8"> 6< title> < /title> 7< meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 8< link rel="stylesheet" type="text/css" href="https://www.songbingjia.com/css/ionic.css" /> 10< script type="text/javascript" src="https://www.songbingjia.com/js/ionic.bundle.js"> < /script> 12< /head> 14< body ng-app="todo" ng-controller="todo"> 16< ion-side-menus> 17 18< !-- 中心内容 --> 19 20< ion-side-menu-content> 21< ion-tabs class="tabs-positive tabs-icon-only"> 22 23< ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> 24 25< ion-header-bar class="bar royal-bg"> 26< h1 class="title royal-bg"> Ionic< /h1> 27< /ion-header-bar> 28 29< ion-content> 30< ion-scroll direction="y" style="width: 100%; height:auto; "> 31< div class="list card"> 32 33< div class="item item-avatar"> 34< img src="https://www.songbingjia.com/img/222.jpg" /> 35< h2> Ionic Demo< /h2> 36< p> LJY< /p> 37< /div> 38 39< div class="item item-image"> 40< img src="https://www.songbingjia.com/img/2852185939109769629.jpg"> 41< /div> 43< a class="itemassertive" href="https://www.songbingjia.com/android/#" on-tap="aaa()"> 45Try Ionic 46< /a> 48< /div> 49< div class="list"> 51< div class="item item-input item-select"> 52< div class="input-label"> 53Lightsaber 54< /div> 55< select> 56< option> Blue< /option> 57< option selected=""> Green< /option> 58 59< /select> 60< /div> 61< /div> 62< /ion-scroll> 63 64< /ion-content> 65 66< !-- 标签 1 内容 --> 67< /ion-tab> 68 69< ion-tab title="2"> 70< ion-header-bar class="bar royal-bg"> 71< h1 class="title royal-bg"> 标签 2 < /h1> 72< /ion-header-bar> 73< h1> 内容2222222222222222222222222222222222222< /h1> 74< /ion-tab> 75 76< ion-tab title="3"> 77< ion-header-bar class="bar royal-bg"> 78< h1 class="title royal-bg"> 标签3< /h1> 79< /ion-header-bar> 80< h1> 内容 3333333333333333333333333333333333333333< /h1> 81< /ion-tab> 82< /ion-tabs> 83 84< /ion-side-menu-content> 85 86< !-- 左侧菜单 --> 87< ion-side-menu side="right"> 88< ion-header-bar class="bar-dark"> 89< h1 class="title"> 设置< /h1> 90 91< /ion-header-bar> 92< div class="list"> 93< div class="item item-divider"> 94这是隐藏在头部下面的 95< /div> 96< a class="item" href="https://www.songbingjia.com/android/#"> 97This is page1 98< /a> 99< a class="item" href="https://www.songbingjia.com/android/#"> 100This is page2 102< /a> 103< a class="item" href="https://www.songbingjia.com/android/#"> 104This is page3 105< /a> 107< /div> 108< /ion-side-menu> 110< /ion-side-menus> 111 112< script type="text/javascript"> 113angular.module(‘todo‘, [‘ionic‘]) 114.controller("todo", function($scope) { 115 116$scope.aaa = function() { 117location.assign("../www/aaa.html") 119} 120$scope.aaa = function() { 121location.assign("../www/aaa.html") 122 123} 124$scope.aaa = function() { 125location.assign("../www/aaa.html") 126 127} 128}) 129< /script> 130< /body> 131 132 < /html>

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

文章图片

1< div> 2< ion-slide-box active-slide="myActiveSlide" does-continue="true" slide-interval="1000"> 3< ion-slide> 4< div class="box blue" on-tap="aaa()"> 5< h1> BLUE< /h1> < /div> 6< /ion-slide> 7< ion-slide> 8< div class="box yellow"> 9< h1> YELLOW< /h1> < /div> 10< /ion-slide> 11< ion-slide> 12< div class="box pink"> 13< h1> PINK< /h1> < /div> 14< /ion-slide> 15< /ion-slide-box> 16< /div> 17 18 < script> 19angular.module(‘todo‘, [‘ionic‘]) 20.controller("todo", function($scope, $timeout, $ionicLoading) { 21// 页面加载动画 22$ionicLoading.show({ 23content: ‘Loading‘, 24animation: ‘fade-in‘, 25showBackdrop: true, 26maxWidth: 200, 27showDelay: 0 28}); 29 30// 设置加载动画结束时间 31$timeout(function() { 32$ionicLoading.hide(); 33$scope.stooges = [{ 34name: ‘Moe‘ 35}, { 36name: ‘Larry‘ 37}, { 38name: ‘Curly‘ 39}]; 40}, 400); 41 46$scope.myActiveSlide = 0; 47}) 48< /script>

目前还在学习制作中，感觉Ionic还是比较好用的一个框架。
【超好用的移动框架--Ionic--构建APP侧边栏底部选项卡轮播图加载动画】