(补充)第十六讲 ionic ion-tap 选项卡以及路由结合 ion-tap 详解

最新推荐文章于 2018-10-16 09:40:00 发布

靈吾靈

最新推荐文章于 2018-10-16 09:40:00 发布

阅读量792

点赞数

分类专栏： ioinc

ioinc 专栏收录该内容

9 篇文章

订阅专栏

<ion-tabs class="tabs-positive tabs-icon-top">
    <ion-tab title="home" icon-on='ion-android-home' icon-off='ion-ios-home' >
        <ion-view>
           <ion-header-bar class="bar-positive">
                <h1 class="title">home</h1>
            </ion-header-bar>
            <ion-content class='balanced-bg light'>
                <p>you are beatifull</p>
            </ion-content>
        </ion-view>
    </ion-tab>
    <ion-tab title="chat" icon-on='ion-ios-download' icon-off='ion-ios-download-outline' badge='12' badge-style='badge-assertive'>
        <ion-view>
            <ion-header-bar class="bar-positive">
                <h1 class="title">chat</h1>
            </ion-header-bar>
            <ion-content class='assertive-bg light'>
                <p>you are beatifull too!</p>
            </ion-content>
        </ion-view>
    </ion-tab>
    <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
        <ion-view>
           <ion-header-bar class="bar-positive">
                <h1 class="title">fuck</h1>
            </ion-header-bar>
            <ion-content class='dark-bg light'>
                <p>you are so cool</p>
            </ion-content>
        </ion-view>
    </ion-tab>
</ion-tabs>

</body>
</html>
<script>
var app = angular.module('myApp',['ionic']);
app.controller('firstCtrl',function($scope,$interval,$ionicTabsDelegate){
   var idx = 0;
    $interval(function(idx){
        idx = (idx + 1) % 3;
        $ionicTabsDelegate.select(idx);
    },2000)
})

</script>