Ionic Tab选项卡使用整理（二）

来源：互联网发布：rimworld mac mod 编辑：程序博客网时间：2024/05/01 21:23

二、ion-tabs指令使用

ion-tabs指定说明：

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

//配置 选项卡的位置app.config(function ($ionicConfigProvider) {    $ionicConfigProvider.tabs.position('bottom');});

2.关于ion-content的问题，更多参考：http://www.ionic.wang/js_doc-index-id-24.html

默认情况下overflow-scroll=true，即使用浏览器默认的滚动，不使用Ionic的滚动，总是显示滚动条。

处理方式设置成false，滚动效果如下：

<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>

实例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">标签1</button>            </ion-content>        </ion-tab>        <ion-tab title="关于" icon-on="ion-ios-locked"                 icon-off="ion-ios-locked-outline">            <ion-header-bar class="bar-positive">                <h1 class="title">                    <div class="text-center">关于</div>                </h1>            </ion-header-bar>            <ion-content>                <p>中文内容</p>            </ion-content>        </ion-tab>        <ion-tab title="设置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">            <ion-header-bar class="bar-positive">                <h1 class="title">                    <div class="text-center">设置</div>                </h1>            </ion-header-bar>            <ion-content>                <div class="row">                    <div class="col text-center">标签二</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']);        //配置 选项卡的位置        //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>

显示结果：

实例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">        <!-- 标签 1 内容 -->        <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="关于" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline" badge="12" badge-style="badge-assertive">        <!-- 标签 2 内容 -->        <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="设置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">        <!-- 标签 3 内容 -->        <ion-view>            <ion-content class="energized-bg">                tab 2 content            </ion-content>        </ion-view>    </ion-tab></ion-tabs>

显示结果如下：

Ionic Tab选项卡使用整理（一）

Cordova 配置WebView可以打开外部链接

Ionic Grid栅格布局居中实例

更多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.html
http://blog.csdn.net/fangquan1980/article/details/53084692（推荐）

0 0