ionic 选项卡栏操作

2017-07-20 18:00:00
admin
原创
351
<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title> </title>
    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    <script type="text/javascript">
     angular.module('ionicApp', ['ionic'])
	 .controller('RootCtrl', function($scope) {
	 })
	 .controller('HomeCtrl', function($scope) {
$scope.items=[
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 { "name":"HTML5"},
	 ];
	});
    </script>
    
  </head>
  <body ng-controller="RootCtrl">
    
    <ion-tabs class="tabs-icon-only tabs-positive">

      <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" 
               ng-controller="HomeCtrl">
        <ion-header-bar class="bar-positive">
          <h1 class="title">Tasks</h1>
        </ion-header-bar>
        <ion-content has-tabs="true">
		  <ion-refresher></ion-refresher>
          <ion-list >
            <ion-item ng-repeat="item in items" item="item" >
              {{item.name}}
            </ion-item>
          </ion-list>
        </ion-content>
      </ion-tab>

      <ion-tab title="About" icon-on="icon ion-ios-clock" icon-off="icon ion-ios-clock-outline">
        <ion-header-bar class="bar-positive">
          <h1 class="title">Deadlines</h1>
        </ion-header-bar>
        <ion-content has-header="true">
          <h1>Deadlines</h1>
        </ion-content>
      </ion-tab>

      <ion-tab title="Settings" icon-on="icon ion-ios-gear" icon-off="icon ion-ios-gear-outline">
        <ion-header-bar class="bar-positive">
          <h1 class="title">Settings</h1>
        </ion-header-bar>
        <ion-content has-header="true">
          <h1>Settings</h1>
        </ion-content>
      </ion-tab>
      
    </ion-tabs>

  </body>
</html>				
				
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227