|
|
<!DOCTYPE html> |
| |
<html> |
| |
<head> |
| |
<meta charset="UTF-8"> |
| |
<meta name="viewport" content="width=device-width, initial-scale=1.0, |
| |
minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> |
| |
<title></title>
|
| |
<link rel="stylesheet" href="css/ionic.min.css" /> |
| |
<script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
|
| |
<script type="text/javascript"> |
| |
var app = angular.module("myApp",['ionic']); |
| |
app.controller("myCtrl",function($scope,$log){ |
| |
$scope.onScrollEvent = function(){ |
| |
$log.log("在滚动"); |
| |
} |
| |
}) |
| |
</script> |
| |
</head> |
| |
<body ng-app="myApp" ng-controller="myCtrl"> |
| |
<!-- |
| |
tabs-icon-only 只显示图片 tabs-icon-top上面是图片，下面是文字 |
| |
--> |
| |
<ion-tabs class="tabs-icon-top tabs-positive"> |
| |
<ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> |
| |
<ion-header-bar align-title="center" class="bar-positive"> |
| |
<div class="buttons"> |
| |
<button type="button">左按钮</button>
|
| |
</div> |
| |
<span class="title">1603L商城</span>
|
| |
<div class="buttons"> |
| |
<button type="button">右按钮</button>
|
| |
</div> |
| |
</ion-header-bar> |
| |
<ion-content> |
| |
<p>11111111111</p>
|
| |
<p>11111111111</p>
|
| |
<p>11111111111</p>
|
| |
<p>11111111111</p>
|
| |
<p>11111111111</p>
|
| |
</ion-content> |
| |
</ion-tab> |
| |
<ion-tab title="联系人" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline"> |
| |
<h1>我是联系人</h1>
|
| |
</ion-tab> |
| |
<ion-tab title="动态" icon-on="ion-navicon" icon-off="ion-ios-navicon-round"> |
| |
<h1>我是动态</h1>
|
| |
</ion-tab> |
| |
</ion-tabs> |
| |
</body> |
| |
</html> |
|
可以在模拟器中运行的必须加的代码为
| <meta name="viewport" content="width=device-width, initial-scale=1.0, |
| |
minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> |
然后把ip改为自己电脑的ip |
|
