<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<title>Title</title>
<link href="../demo1/lib/css/ionic.css" rel="stylesheet">
<style>
img{
width: 100%;
height: auto;
}
.slider-pager .slider-pager-page.active{/*轮播图中小圆点的颜色*/
color: blue;
}
</style>
<script src="../demo1/lib/js/ionic.bundle.min.js"></script>
<script>
var myapp = angular.module("myapp",["ionic"]);
</script>
</head>
<body ng-app="myapp">
<ion-tabs class="tabs-positive tabs-icon-only">
<ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<!-- 标签 1 内容 -->
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">左侧按钮</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">右侧按钮</button>
</div>
</ion-header-bar>
<ion-content>
<ion-slide-box auto-play="true">
<ion-slide>
<div class="box blue"><img src="../img/2.jpg"></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><img src="../img/4.jpg"></div>
</ion-slide>
<ion-slide>
<div class="box pink"><img src="../img/6.jpg"></div>
</ion-slide>
</ion-slide-box>
</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>
</body>
</html>
扫一扫
6719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
