主页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../lib/css/ionic.min.css">
<script src="../lib/js/ionic.bundle.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
img{
width:100%;
height: auto;
}
.slider-pager .slider-pager-page.active{
color: white;
}
.tou{
width: auto;
height: 100%;
}
ion-list ion-item p{
width: 100%;
height: 30px;
line-height: 40px;
}
ion-list ion-item p img{
width: auto;
height: 25px;
line-height: 40px;
padding-right:10px;
}
</style>
<script>
var my=angular.module("my",["ionic"]);
my.controller("mys",function ($scope, $http,$ionicSideMenuDelegate) {
$http({
url:"data.json"
}).then(function (data) {
$scope.data=data.data
})
$scope.doRefresh = function() {
$http.get('data.json')
.success(function(newItems) {
$scope.data = newItems;
})
.finally(function() {
// 停止广播ion-refresher
$scope.$broadcast('scroll.refreshComplete');
});
};
/*上拉加载*/
$scope.loadMore = function() {
$http.get('data.json').success(function(data) {
Array.prototype.push.apply($scope.data,data);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.$on('stateChangeSuccess', function() {
$scope.loadMore();
});
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
})
</script>
</head>
<body ng-app="my" ng-controller="mys">
<ion-side-menus>
<!-- 中间内容 -->
<ion-side-menu-content>
<ion-tabs class="tabs-positive tabs-icon-top">
<ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<!-- 标签 1 内容 -->
<ion-header-bar align-title="center" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">左侧按钮</button>
</div>
<h1 class="title">飞鸟社</h1>
<div class="buttons">
<button class="button">右侧按钮</button>
</div>
</ion-header-bar>
<ion-content>
<ion-slide-box auto-play="true" does-continue="true" slide-interval="1000">
<ion-slide>
<div class="box blue"><img src="../img/community_06.jpg" height="380" width="750"/></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><img src="../img/community_04.jpg" height="380" width="750"/></div>
</ion-slide>
<ion-slide on-slide-changed="slideHasChanged(index)">
<div class="box pink"><img src="../img/community_02.jpg" height="380" width="750"/></div>
</ion-slide>
</ion-slide-box>
<ion-refresher
pulling-text="下拉刷新..."
on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="item in data">
<h2>{{item.title}}</h2>
<img src="{{item.pic}}">
<p>{{item.text}}</p>
</ion-item>
</ion-list>
<ion-infinite-scroll
on-infinite="loadMore()"
distance="0%">
</ion-infinite-scroll>
</ion-content>
</ion-tab>
<ion-tab title="关于" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
<!-- 标签 2 内容 -->
<p>第二个</p>
</ion-tab>
<ion-tab title="设置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
<!-- 标签 3 内容 -->
<p>第三个</p>
</ion-tab>
</ion-tabs>
</ion-side-menu-content>
<!-- 左侧菜单 -->
<ion-side-menu side="left">
<ion-header-bar align-title="center" class="bar-positive">
<img src="../img/p03.png" class="tou">
<h1 class="title">信息</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item>
<p><img src="../png/512/QQ1.png">{{"我的超级会员"}}</p>
</ion-item>
<ion-item>
<p><img src="../png/512/QQ1.png">{{"QQ钱包"}}</p>
</ion-item>
<ion-item>
<p><img src="../png/512/QQ1.png">{{"个性装扮"}}</p>
</ion-item>
<ion-item>
<p><img src="../png/512/QQ1.png">{{"我的收藏"}}</p>
</ion-item>
<ion-item>
<p><img src="../png/512/QQ1.png">{{"我的相册"}}</p>
</ion-item>
<ion-item>
<p><img src="../png/512/QQ1.png">{{"我的文件"}}</p>
</ion-item>
<ion-item>
<p><img src="../png/512/QQ1.png">{{"免流量特权"}}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<!-- 右侧菜单 -->
<ion-side-menu side="right">
</ion-side-menu>
</ion-side-menus>
</body>
</html>
侧滑页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../lib/css/ionic.min.css">
<script src="../lib/js/ionic.bundle.min.js"></script>
<style>
.tou{
width: auto;
height: 100%;
}
ion-list ion-item p{
width: 100%;
height: 30px;
line-height: 40px;
}
ion-list ion-item p img{
width: auto;
height: 25px;
line-height: 40px;
padding-right:10px;
}
</style>
<script>
var my=angular.module("my",["ionic"]);
my.controller("ContentController",function ($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
});
</script>
</head>
<body ng-app="my">
<ion-side-menus>
<!-- 中间内容 -->
<ion-side-menu-content ng-controller="ContentController">
</ion-side-menu-content>
<!-- 左侧菜单 -->
<ion-side-menu side="left">
<ion-header-bar align-title="center" class="bar-positive">
<img src="../img/p03.png" class="tou">
<h1 class="title">信息</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item>
<p><img src="../png/512/QQ1.png">{{"我的超级会员"}}</p>
</ion-item>
<ion-item>
<p><img src="../png/512/QQ1.png">{{"QQ钱包"}}</p>
</ion-item>
<ion-item>
<p><img src="../png/512/QQ1.png">{{"个性装扮"}}</p>
</ion-item>
<ion-item>
<p><img src="../png/512/QQ1.png">{{"我的收藏"}}</p>
</ion-item>
<ion-item>
<p><img src="../png/512/QQ1.png">{{"我的相册"}}</p>
</ion-item>
<ion-item>
<p><img src="../png/512/QQ1.png">{{"我的文件"}}</p>
</ion-item>
<ion-item>
<p><img src="../png/512/QQ1.png">{{"免流量特权"}}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<!-- 右侧菜单 -->
<ion-side-menu side="right">
</ion-side-menu>
</ion-side-menus>
</body>
</html>