ionic简单的布局

最新推荐文章于 2024-06-05 17:49:43 发布

子非鱼_王

最新推荐文章于 2024-06-05 17:49:43 发布

阅读量230

点赞数

分类专栏：代码

本文链接：https://blog.csdn.net/wqzfy/article/details/78538973

版权

21 篇文章 0 订阅

订阅专栏

Ionic是一个强大的HTML5应用程序开发框架，可以帮助使用web技术。

Ionic主要外观和体验，以及和你的应用程序的UI交互。

Ionic是一个轻量级的手机UI库，具有速度快，界面现代化，美观等特点。

Ionic的特点：

1.基于angular语法，简单易学

2.Ionic是一个轻量级框架

3.支持angularjs特性，MVC，代码易维护

4.Ionic性能优越，运行速度快。

<html>

	<head>
	<meta charset="utf-8" />
	<title>ionic练习1</title>
	<!--
	框架
	1.下载类库，。。。。。
	2.导入工程
	3.使用

	头部
	ion-header-bar
	内容
	ion-content
	脚
	ion-footer-bar
	-->
	<script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="css/ionic.css" />
	</head>

	<body ng-app="myApp" ng-controller="myCtrl">

	<!--
	头部
	如果要修改样式，使用class属性
	ionic.css里面已经定义好了一些属性。
	标题居中
	-->
	<ion-header-bar class="bar-positive">
	<!--
	标题左侧加按钮
	-->
	<input type="button" value="返回" class="button" />
	<div class="title" align-title="center">
	HelloIonic!
	</div>
	<input type="button" value="刷新" class="button" />
	</ion-header-bar>
	<!--
	中间内容
	-->
	<ion-content>
	<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
	<ul class="list">
	<li class="item">手机</li>
	<li class="item">手机</li>
	<li class="item">手机</li>
	</ul>
	</ion-content>

	<!--
	脚
	-->
	<ion-footer-bar class="bar bar-positive">
	<span class="title" align-title="center">
	我是底部
	</span>
	</ion-footer-bar>
	<script type="text/javascript">
	var mo = angular.module("myApp", ["ionic"]); //依赖注入，：加入ionic对象
	mo.controller("myCtrl", function($scope) {
	//下拉刷新的方法
	$scope.doRefresh = function(){
	console.log("开始刷新....")
	//结束刷新，让刷新的条目回去
	//发送广播,结束刷新
	// $scope.$broadcast('scroll.refreshComplete');
	}
	});
	</script>

	</body>

	</html>