!DOCTYPE html>
//下拉刷新
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/ionic.css" />
<script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
</head>
<body ng-app="myapp" ng-controller="mycrl">
<ion-view title="Home" hide-nav-bar="true">
<!--滚动条-->
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
<div style="width: 1000px;height: 1000px;">
<!--下拉刷新-->
<ion-content>
<ion-refresher pulling-text="下拉刷新" on-refresh="shua()"></ion-refresher>
<ion-list class="list">
<ion-item class="item" ng-repeat="a in aa track by $index">{{a}}</ion-item>
</ion-list>
</ion-content>
</div>
</ion-scroll>
</ion-view>
<script type="text/javascript">
var mo=angular.module("myapp",["ionic"]);
mo.controller("mycrl",function($scope,$http){
$scope.aa=["李四","王五"];
//刷新的方法
$scope.shua=function(){
//通过服务获取数据
$http.get("data/data1.json").then(function(req){
//接收数据
var dd=req.data;
for (var i = 0; i < dd.length; i++) {
$scope.aa.push(dd[i].name);
}
//发送广播
$scope.$broadcast('scroll.refreshComplete');
});
};
});
</script>
</body>
</html>
//选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/ionic.css" />
<script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
</head>
<body ng-app="myapp" ng-controller="mycrl">
<!--选项卡栏操作-->
<ion-tabs class="tabs-icon-only tabs-positive">
<ion-tab title="Aa">
<header class="bar bar-header bar-positive">
<h2 class="title">Sett</h2>
</header><br /> <br />
<center>
<ul class="list">
<li class="item">我</li>
<li class="item">爱</li>
<li class="item">你</li>
</ul>
</center>
</ion-tab>
<ion-tab title="Bb">
<header class="bar bar-header bar-positive">
<h2 class="title">Tasks</h2>
</header><br /> <br />
<center>
<ul class="list">
<li class="item">你</li>
<li class="item">爱</li>
<li class="item">我</li>
</ul>
</center>
</ion-tab>
</ion-tabs>
<script type="text/javascript">
var mo=angular.module("myapp",["ionic"]);
mo.controller("mycrl",function($scope){
});
</script>
</body>
</html>
//侧拉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/ionic.css" />
<script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
</head>
<body ng-app="myapp" ng-controller="mycrl">
<!--侧栏菜单-->
<ion-side-menus>
<!--
左侧内容
-->
<ion-side-menu side="left">
<ul>
<li>zhangsan</li>
</ul>
</ion-side-menu>
<!--
中间 的内容
-->
<ion-side-menu-content>
<div class="content">
我是中间内容
</div>
</ion-side-menu-content>
<!--
右侧
-->
<ion-side-menu side = "right">
<ul>
<li>我是右侧的zhangsan</li>
</ul>
</ion-slide-menu>
</ion-side-menu>
<script type="text/javascript">
var mo=angular.module("myapp",["ionic"]);
mo.controller("mycrl",function($scope){
});
</script>
</body>
</html>