Ionic Tab選項(xiàng)卡使用整理（二）

2019-11-09 17:27:08

字體：大中小

供稿：網(wǎng)友

二、ion-tabs指令使用

ion-tabs指定說明：

1.Android中位置在上部，‘tabs-top’，如果想修改位置，需要在config中配置

//配置 選項(xiàng)卡的位置app.config(function ($ionicConfigPRovider) {    $ionicConfigProvider.tabs.position('bottom');});2.關(guān)于ion-content的問題，更多參考：http://www.ionic.wang/js_doc-index-id-24.html
默認(rèn)情況下overflow-scroll=true，即使用瀏覽器默認(rèn)的滾動(dòng)，不使用Ionic的滾動(dòng)，總是顯示滾動(dòng)條。
處理方式設(shè)置成false，滾動(dòng)效果如下：
<ion-content class="calm-bg" overflow-scroll="false">    <div class="list">        <div class="item item-calm" ng-repeat="x in [1,2,3,4,5,6,7,8,9,10,11,12]">{{x*10}}</div>    </div></ion-content>
實(shí)例1：
<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">    <link href="../scripts/ionic/CSS/ionic.min.css" rel="stylesheet" /></head><body ng-app="myApp" ng-controller="myCtrl">    <ion-tabs class="tabs-assertive  tabs-icon-bottom">        <ion-tab title="首頁"                 icon-on="ion-ios-filing"                 icon-off="ion-ios-filing-outline">            <ion-header-bar class="bar-positive">                <h1 class="title">                    <div class="text-center">首頁</div>                </h1>            </ion-header-bar>            <ion-content>                <br />                <button class="button button-dark">標(biāo)簽1</button>            </ion-content>        </ion-tab>        <ion-tab title="關(guān)于" icon-on="ion-ios-locked"                 icon-off="ion-ios-locked-outline">            <ion-header-bar class="bar-positive">                <h1 class="title">                    <div class="text-center">關(guān)于</div>                </h1>            </ion-header-bar>            <ion-content>                <p>中文內(nèi)容</p>            </ion-content>        </ion-tab>        <ion-tab title="設(shè)置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">            <ion-header-bar class="bar-positive">                <h1 class="title">                    <div class="text-center">設(shè)置</div>                </h1>            </ion-header-bar>            <ion-content>                <div class="row">                    <div class="col text-center">標(biāo)簽二</div>                </div>            </ion-content>        </ion-tab>    </ion-tabs>    <script src="../scripts/ionic/js/ionic.bundle.min.js"></script>    <script>        var app = angular.module('myApp', ['ionic']);        //配置 選項(xiàng)卡的位置        //app.config(function ($ionicConfigProvider) {        //    $ionicConfigProvider.tabs.position('bottom');        //});        app.controller('myCtrl', function ($scope, $http, $ionicTabsDelegate) {            $scope.selectTabWithIndex = function (index) {                $ionicTabsDelegate.select(index);            }        })        .controller('HomeCtrl', function ($ionicConfigProvider) {            $ionicConfigProvider.tabs.position('bottom'); //        })    </script></body></html>顯示結(jié)果：
實(shí)例2：（推薦）
<ion-header-bar class="bar-positive">    <h1 class="title">ion-tabs簡介</h1></ion-header-bar><ion-tabs class="tabs-light tabs-icon-only">    <ion-tab title="首頁" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" badge="5" badge-style="badge-royal">        <!-- 標(biāo)簽 1 內(nèi)容 -->        <ion-view>            <ion-content class="calm-bg" overflow-scroll="false">                <div class="list">                    <div class="item item-calm" ng-repeat="x in [1,2,3,4,5,6,7,8,9,10,11,12]">{{x*10}}</div>                </div>            </ion-content>        </ion-view>    </ion-tab>    <ion-tab title="關(guān)于" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline" badge="12" badge-style="badge-assertive">        <!-- 標(biāo)簽 2 內(nèi)容 -->        <ion-view>            <ion-content class="balanced-bg" overflow-scroll="false">                <br />                tab 2 content                <br />                <br />            </ion-content>        </ion-view>    </ion-tab>    <ion-tab title="設(shè)置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">        <!-- 標(biāo)簽 3 內(nèi)容 -->        <ion-view>            <ion-content class="energized-bg">                tab 2 content            </ion-content>        </ion-view>    </ion-tab></ion-tabs>顯示結(jié)果如下：
更多：
Ionic Tab選項(xiàng)卡使用整理（一）
Cordova 配置WebView可以打開外部鏈接
Ionic Grid柵格布局居中實(shí)例
更多Api：http://www.ionic.wang/css_doc-index.html#tabs
http://www.ionic.wang/js_doc-index-id-2.html
http://www.runoob.com/ionic/ionic-ion-tabs.htmlhttp://blog.csdn.net/fangquan1980/article/details/53084692（推薦）