|
|
<!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> | ||||
|
可以在模拟器中运行的必须加的代码为
|
相关文章：