Ionic基礎——ion-tap選項卡及路由結合ion-tap詳解
阿新 • • 發佈：2019-01-09
<!DOCTYPE html> <html ng-app="ezApp"> <head> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <script src="../../lib/js/ionic.bundle.min.js"></script> <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css"> </head> <body ng-controller="ezCtrl"> <ion-header-bar class="bar-stable"> <h1 class="title">$ionTabsDelegate</h1> </ion-header-bar> <ion-tabs class="tabs-stable"> <ion-tab title="tab1" disabled="true" icon-on="ion-ios-heart" icon-off="ion-ios-heart-outline"> <ion-view> <ion-content padding="true" class="positive-bg light"> <p>this is content of tab 1</p> </ion-content> </ion-view> </ion-tab> <ion-tab title="tab2" disabled="true" icon-on="ion-ios-heart" icon-off="ion-ios-heart-outline"> <ion-view> <ion-content padding="true" class="calm-bg light"> <p>this is content of tab 2</p> </ion-content> </ion-view> </ion-tab> <ion-tab title="tab3" disabled="true" icon-on="ion-ios-heart" icon-off="ion-ios-heart-outline"> <ion-view> <ion-content padding="true" class="balanced-bg light"> <p>this is content of tab 3</p> </ion-content> </ion-view> </ion-tab> </ion-tabs> </body> </html> <script> angular.module("ezApp",["ionic"]) .controller("ezCtrl",function($scope,$ionicTabsDelegate,$interval){ var idx=0; $interval(function(){ idx = (idx + 1) % 3; console.log(idx); $ionicTabsDelegate.select(idx); },2000); }); </script>
