Ionic Tab選項卡使用整理（三）

2019-11-09 18:33:23

字體：大中小

來源：轉載

供稿：網友

一、ion-tabs指令+路由使用實例

1.路由配置

angular.module('ionicApp', ['ionic']).config(function ($statePRovider, $urlRouterProvider) {    $stateProvider        .state('tabs', {            url: "/tab",            abstract: true,            templateUrl: "templates/tabs.html"        })        .state('tabs.home', {            url: "/home",            views: {                'home-tab': { //指定所屬的view視圖                    templateUrl: "templates/home.html",                    controller: 'HomeTabCtrl'                }            }        })        .state('tabs.facts', {            url: "/facts",            views: {                'home-tab': {                    templateUrl: "templates/facts.html"                }            }        })        .state('tabs.facts2', {            url: "/facts2",            views: {                'home-tab': {                    templateUrl: "templates/facts2.html"                }            }        })        .state('tabs.about', {            url: "/about",            views: {                'about-tab': {                    templateUrl: "templates/about.html"                }            }        })        .state('tabs.navstack', {            url: "/navstack",            views: {                'about-tab': {                    templateUrl: "templates/nav-stack.html"                }            }        })        .state('tabs.contact', {            url: "/contact",            views: {                'contact-tab': {                    templateUrl: "templates/contact.html"                }            }        });    $urlRouterProvider.otherwise("/tab/home");}).controller('HomeTabCtrl', function ($scope) {    console.log('HomeTabCtrl');});
2.頁面配置
<body ng-app="ionicApp" ng-controller="HomeTabCtrl">    <ion-nav-bar class="bar-positive">        <ion-nav-back-button></ion-nav-back-button>    </ion-nav-bar>    <ion-nav-view></ion-nav-view>
3.頁面卡配置
<!--主頁頁面內容--><script id="templates/tabs.html" type="text/ng-template">    <ion-tabs class="tabs-icon-top tabs-positive">        <ion-tab title="Home" icon="ion-home" href="#/tab/home">            <ion-nav-view name="home-tab"></ion-nav-view>        </ion-tab>        <ion-tab title="About" icon="ion-ios-information" href="#/tab/about">            <ion-nav-view name="about-tab"></ion-nav-view>        </ion-tab>        <ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">            <ion-nav-view name="contact-tab"></ion-nav-view>        </ion-tab>    </ion-tabs></script><script id="templates/home.html" type="text/ng-template">    <ion-view view-title="Home">        <ion-content class="padding">            <p>                <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>            </p>        </ion-content>    </ion-view></script>
效果圖：
更多：
Ionic Tab選項卡使用整理（二）
Ionic Tab選項卡使用整理（一）
Cordova 配置WebView可以打開外部鏈接