ionic-tabs(页签)

ionic-tabs(页签)

通过按钮或其他方式切换页面

示例代码：

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
 6     <link rel="stylesheet" href="css/ionic.css"/>
 7     <script src="js/ionic.bundle.js"></script>
 8     <title></title>
 9 </head>
10 <body>
11     <ion-header-bar>
12         <h1 class="title">Header</h1>
13     </ion-header-bar>
14     <!--<ion-content>-->
15         <!--<p>Hello</p>-->
16     <!--</ion-content>-->
<!-- ion-tabs标签不能放在ion-content标签内 -->

17     <ion-tabs class="tabs-royal tabs-icon-top">
18         <ion-tab title="音乐" icon="ion-headphone">
19             <ion-view>
20                 <ion-content class="positive-bg">
21                     这是音乐的页面
22                 </ion-content>
23             </ion-view>
24         </ion-tab>
25         <ion-tab title="电影" icon="ion-videocamera">
26             <ion-view>
27                 <ion-content class="assertive-bg">
28                     这是电影的页面
29                 </ion-content>
30             </ion-view>
31         </ion-tab>
32     </ion-tabs>
33     <!--<ion-footer-bar>-->
34         <!--<h1 class="title">Footer</h1>-->
35     <!--</ion-footer-bar>-->
36 <script>
37     var app = angular.module('myApp', ['ionic']);
38 </script>
39 </body>
40 </html>

效果图如下：

posted @ 2017-01-09 19:41  时间脱臼  阅读(329)  评论(0)    收藏  举报