###引导页的实现
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myController">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/ionic.css" />
<script src="js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
img {
width: 100vw;
min-height: 100vh;
}
</style>
</head>
<body>
<ion-content>
<ion-slide-box on-slide-changed="slideHasChanged($index)" show-pager="true" pager-click="clickPager(index)" auto-play="true" active-slide="myActiveBox" on-tap="startOrStop()" slide-interval="1000">
<ion-slide>
<img src="http://www.gaopinimages.com/imageview/133101824162.jpg" />
</ion-slide>
<ion-slide>
<img src="http://www.gaopinimages.com/imageview/133104150886.jpg" />
</ion-slide>
<ion-slide>
<img src="http://www.gaopinimages.com/imageview/133203165776.jpg" />
</ion-slide>
</ion-slide-box>
</ion-content>
<script type="text/javascript">
var myApp = angular.module("myApp", ['ionic']);
//注入$ionicSlideBoxDelegate，控制所有滑动框
myApp.controller("myController", function($scope, $ionicSlideBoxDelegate,$timeout) {
$scope.myActiveBox = 0;
$scope.clickPager = function(index) {
//alert(index);
//单击切换按钮将选择相应的页面
$scope.myActiveBox = index;
}
//定义一个标识 是否正在轮播
$scope.tag = true;
$scope.startOrStop = function() {
if($scope.tag == true) {
//轮播则停止
$ionicSlideBoxDelegate.stop();
$scope.tag = false;
} else {
//轮播则启动
$ionicSlideBoxDelegate.start();
$scope.tag = true;
$scope.home();
}
}
$scope.slideHasChanged = function (index) {
if (index == 2) {
$timeout(function () {
window.location.href= "main.html";
},2000)
}
};
})
</script>
</body>
</html>
###主体页面实现
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myController">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/ionic.css" />
<script src="js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<!--在页面上加载导航栏-->
<ion-nav-bar class="bar-positive">
</ion-nav-bar>
<!--在页面上加载导航视图 用于加载不同的子页面-->
<ion-nav-view>
</ion-nav-view>
<script>
var myApp = angular.module("myApp", ['ionic']);
/**
* 2、注入组件$stateProvider,$urlRouterProvider
*/
myApp.config(function($stateProvider, $urlRouterProvider) {
/**
* 3、配置
* 1、配置父模板的路由信息
* 2、配置两个子模板的路由信息
*/
$stateProvider.state("tabs", {
templateUrl: "templates/tabs.html",
abstract: true,
url: "/tab"
});
$stateProvider.state("tabs.home", {
url: "/home",
views: {
"home-tab": {
templateUrl: "templates/home.html"
}
}
});
$stateProvider.state("tabs.about", {
url: "/about",
views: {
"about-tab": {
templateUrl: "templates/about.html"
}
}
});
$stateProvider.state("tabs.menu", {
url: "/menu",
views: {
"menu-tab": {
templateUrl: "templates/menu.html"
}
}
});
$stateProvider.state("tabs.my", {
url: "/my",
views: {
"my-tab": {
templateUrl: "templates/my.html"
}
}
});
$urlRouterProvider.otherwise("/tab/home");
});
myApp.controller("myController", function($scope) {
})
</script>
<!--4、制作模板-->
<!--1、制作父模板-->
<script type="text/ng-template" id="templates/tabs.html">
<ion-tabs class="tabs-icon-top tabs-stable tabs-color-active-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
<!--其中的name是指对应子模块的view的名字-->
</ion-tab>
<ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Menu" icon="ion-beer" href="#/tab/menu">
<ion-nav-view name="menu-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="My" icon="ion-person" href="#/tab/my">
<ion-nav-view name="my-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<!--2、制作子模板-->
<script type="text/ng-template" id="templates/home.html">
<ion-view view-title="home">
<!--设置导航栏标题-->
<!--设置子页面主体内容-->
<ion-content>
<!--<div ng-include="'xxx.html'"></div>-->
<h1>home</h1>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="templates/about.html">
<ion-view view-title="about">
<!--设置导航栏标题-->
<!--设置子页面主体内容-->
<ion-content>
<!--<div ng-include="'xxx.html'"></div>-->
<h1>about</h1>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="templates/menu.html">
<ion-view view-title="menu">
<!--设置导航栏标题-->
<!--设置子页面主体内容-->
<ion-content>
<!--<div ng-include="'xxx.html'"></div>-->
<h1>menu</h1>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="templates/my.html">
<ion-view view-title="my">
<!--设置导航栏标题-->
<!--设置子页面主体内容-->
<ion-content>
<!--<div ng-include="'xxx.html'"></div>-->
<h1>my</h1>
</ion-content>
</ion-view>
</script>
</body>
</html>
扫一扫
487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
