ion-tap选项卡及路由结合ion-tap

ion-tabs简介

<!DOCTYPE html>
<html ng-app="ionic">
<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>
    <ion-header-bar class="bar-positive">
        <h1 class="title">ion-tabs简介</h1>
    </ion-header-bar>
    <ion-tabs class="tabs-positive tabs-icon-only">  

        <ion-tab title="首页" icon-on="ion-ios-home" icon-off="ion-ios-home-outline">
            <!-- 标签 1 内容 -->
            <ion-view>
                <ion-content class="calm-bg">
                    tab 1 content
                </ion-content>
            </ion-view>
        </ion-tab>  

        <ion-tab title="关于" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
            <!-- 标签 2 内容 -->
            <ion-view>
                <ion-content class="balanced-bg">
                    tab 2 content
                </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>
</body>
</html>

　　

二.ion-tabs 常用设置

ion-tabs声明条带风格：

  • .tabs-striped样式可以将选项卡 声明为条带风格;
  • .tabs-standard 申明不带条风格;
  • <ion-tabs class="tabs-striped">...</ion-tabs>

    也可以通过$ionicConfigProvider在AngularJS的配置阶段，将选项卡设置为条带风格：

    app.config(function($ionicConfigProvider){
 $ionicConfigProvider.tabs.style("striped"); // 参数可以是： standard | striped
})

    　　

    ion-tabs : 声明位置：

    如果学习过课程：ionic之CSS框架，应该记得使用.tabs-top可以将选项卡置于 顶部标题栏之下：

    <ion-tabs class="tabs-top">...</ion-tabs>

    也可以通过$ionicConfigProvider，在配置阶段设置选项卡的位置是在顶部还是底部：

    app.config(function($ionicConfigProvider){
$ionicConfigProvider.tabs.position("top"); //参数可以是：top | bottom
});

    　　

    　　
    <!DOCTYPE html>
<html ng-app="ionic">
<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>
    <ion-header-bar class="bar-positive">
        <h1 class="title">ion-tabs : top</h1>
    </ion-header-bar>
    <ion-tabs class="tabs-positive tabs-striped tabs-top">
        <ion-tab title="热门">
            <ion-view>
                <ion-content class="calm-bg">
                    tab 1 content
                </ion-content>
            </ion-view>
        </ion-tab>
        <ion-tab title="最新">
            <ion-view>
                <ion-content class="balanced-bg">
                    tab 2 content
                </ion-content>
            </ion-view>
        </ion-tab>
        <ion-tab title="推荐">
            <ion-view>
                <ion-content class="energized-bg">
                    tab 3 content
                </ion-content>
            </ion-view>
        </ion-tab>
    </ion-tabs>
</body>
</html>

    三. ion-tabs 下面的 ion-tab ： 标题文字、图标和徽章显示隐藏

    ion-tab指令有以下属性用于设置文本、图标和徽章：

    • title - 标题文字

    标题文字是必须的。该属性值将作为选项页的标题文字。

    icon - 标题图标

    使用icon属性是可选的，该属性值将用来在标题文字旁边添加一个指定的图标。 这个属性的值将被作为icon-on和icon-off的默认值。

    • icon-on - 被选中状态的标题图标

    如果一个选项页被选中，ion-tabs将使用icon-on属性的值绘制图标。如果icon-on 没有设置，那么ion-tabs就使用icon属性的值绘制图标。

    • icon-off - 未选中状态的标题图标

    如果一个选项页没有被选中，ion-tabs将使用icon-off属性的值绘制图标。如果icon-off 没有设置，那么ion-tabs就使用icon属性的值绘制图标。

    • badge - 标题徽章

    ion-tabs使用badge属性的值在标题文字旁边添加一个圆形的文字标识，通常用来 显示数字。这个属性是可选的，可以是一个具体的值，也可以是当前作用域上的 一个变量。

    • badge-style - 标题徽章样式

    使用badge-style属性设置徽章的样式， 比如配色方案：barge-{color}。

    • hidden - 隐藏

    hidden属性是当前作用域上的表达式。 当其值为true时，选项页将不可见

    • disabled - 禁止

    disabled属性是当前作用域上的表达式。当值为true时，选项页将不响应 用户的点击

    <!DOCTYPE html>
<html ng-app="ionic">
<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>
    <ion-tabs class="tabs-positive tabs-icon-top">  

        <ion-tab title="主页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
            <ion-view>
                <ion-header-bar class="bar-positive">
                    <h1 class="title">home tab</h1>
                </ion-header-bar>
                <ion-content>
                    <p>home content</p>
                </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">
            <ion-view>
                <ion-header-bar  class="bar-positive">
                    <h1 class="title">about tab</h1>
                </ion-header-bar>
                <ion-content>
                    <p>about content</p>
                </ion-content>
            </ion-view>
        </ion-tab>  

        <ion-tab title="设置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
            <ion-view>
                <ion-header-bar  class="bar-positive">
                    <h1 class="title">settings tab</h1>
                </ion-header-bar>
                <ion-content>
                    <p>settings content</p>
                </ion-content>
            </ion-view>
        </ion-tab>  

    </ion-tabs>
</body>
</html>

    　　

    　　

    四.ion-tabs 事件 和 $ionicTabsDelegate

    1.ion-tab事件：

    • on-select - 选中事件。可选，选项页从未选中状态切换到选中状态时执行此表达式；
    • on-deselect - 未选中事件。可选，选项页从选中状态切换到未选中状态时执行此表达式；
    • ng-click - 点击事件。可选，选项页被点击时执行此表达式。如果这个属性被设置，那么ion-tabs将不会 自动切换选项页，调用者需要手动调用$ionicTabsDelegate的select()方法进行 选项页切换；
    <!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-positive">
        <h1 class="title">{{title}}</h1>
    </ion-header-bar>  

    <ion-tabs class="tabs-positive tabs-striped">
        <ion-tab title="tab1" on-select="on_select(1)">
            <ion-view>
                <ion-content class="calm-bg">
                    tab 1 content
                </ion-content>
            </ion-view>
        </ion-tab>
        <ion-tab title="tab2" on-select="on_select(2)">
            <ion-view>
                <ion-content class="balanced-bg">
                    tab 2 content
                </ion-content>
            </ion-view>
        </ion-tab>
        <ion-tab title="tab3" on-select="on_select(3)">
            <ion-view>
                <ion-content class="energized-bg">
                    tab 3 content
                </ion-content>
            </ion-view>
        </ion-tab>
    </ion-tabs>
</body>
</html>
<script>
angular.module("ezApp",["ionic"])
.controller("ezCtrl",function($scope){
    $scope.title="ion-tab : events";
    $scope.on_select = function(idx){
        $scope.title = ["ion-tab ",idx," selected!"].join("");
    }
});  

</script>

    2.ionicTabsDelegate

    使用$ionicTabsDelegate服务，我们可以在脚本中控制选项卡对象：

    • select(index) - 选中指定的选项页。index参数从0开始，第一个选项页的index为0，第二个为1，依次类推。
    • selectedIndex() - 返回当前选中选项页的索引号。如果当前没有选中的选项页，则返回 -1。
    <!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>

    　　

    五.ion-tabs路由详解

    1. 触发状态迁移的几种方式（通俗的讲就是页面跳转的几种方式）.

    1). 调用$state.go() 方法，这是一个高级的便利方法；

    2). 点击包含 ui-sref 指令的链接;

    3). 导航到与状态相关联的 url。

    <a ui-sref="state1">Go State 1</a>

    　　

    2. 通过href方式页面切换需要指定 url.

    3. ionic中结合tab状态嵌套的几种方式

    状态可以相互嵌套。有三个嵌套的方法：

    1).使用“点标记法”，例如：.state(‘contacts.list‘, {});

    在$stateProvider中可以使用点语法来表示层次结构，下面，contacts.list是contacts的子状态。     

　　　　

$stateProvider
.state(‘contacts‘, {})
.state(‘contacts.list‘, {});

　　 2).使用parent属性，指定一个父状态的名称字符串，例如：parent: ‘contacts‘;

　　

$stateProvider
.state(‘contacts‘, {})
.state(‘list‘, { parent: ‘contacts‘ });

　　

　　

3).使用parent属性，指定一个父状态对象，例如：parent: contacts（contacts 是一个状态对象);

如果你不喜欢使用基于字符串的状态，您还可以使用基于对象的状态。name属性将在状态对象内部设置，          在所有的子状态对象中设置parent属性为父           状态对象，像下面这样：

　　　

var contacts = { name: ‘contacts‘, //mandatory templateUrl: ‘contacts.html‘ }
var contactsList = { name: ‘list‘, //mandatory parent: contacts, //mandatory templateUrl: ‘contacts.list.html‘ }
$stateProvider
.state(contacts)
.state(contactsList)

　　

4. ionic路由结合tap实现页面切换

1). 在ionic tab中定义ion-nav-view 并且加上name属性

<ion-nav-view name="news-list"></ion-nav-view>

　　

2. 在ionic $stateProvider.state中定义view 并对应 ion-nav-view 中的name属性

5. ionic states 抽象状态abstract
       一个抽象的状态可以有子状态但不能显式激活，它将被隐性激活当其子状态被激活时。
       下面是两个最常用的抽象状态的示例：
        •为所有子状态预提供一个基url
        •在父状态中设置template属性，子状态对应的模板将插入到父状态模板中的ui-view(s)中。

示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>  

    <link href="lib/css/ionic.css" rel="stylesheet">  

    <script src="lib/js/ionic.bundle.js"></script>  

    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>  

  </head>
  <body ng-app="myApp">
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </body>
</html>

　　

<ion-tabs class="tabs-icon-top tabs-positive">
    <ion-tab title="tab1" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab1">
        <ion-nav-view name="tab-tab1"></ion-nav-view>
    </ion-tab>  

    <ion-tab title="tab2" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/tab2">
        <ion-nav-view name="tab-tab2"></ion-nav-view>
    </ion-tab>  

    <ion-tab title="tab3" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/tab3">
        <ion-nav-view name="tab-tab3"></ion-nav-view>
    </ion-tab>  

</ion-tabs>

　　

<ion-view view-title="Tab1">
  <ion-content>
      Tab1  

      {{title}}  

      <a class="button" href="#/tab/content1/10">跳转到内容</a>  

      <a class="button" href="#/news">news跳转到内容</a>
  </ion-content>
</ion-view>

　　

<ion-view view-title="Tab2">
  <ion-content>
      Tab2
      {{title}}
  </ion-content>
</ion-view>

　　

<ion-view view-title="Tab3">
  <ion-content>
      Tab3
      {{title}}
  </ion-content>
</ion-view>

　　

<ion-view view-title="tabContent1">
  <ion-content>
      tabContent1  

      {{title}}
  </ion-content>
</ion-view>

　　

<ion-view view-title="news">
  <ion-content>
      news
      news
      news  

  </ion-content>
</ion-view>

　　

angular.module(‘myApp‘, [‘ionic‘,‘myApp.controllers‘])  

.config(function($stateProvider, $urlRouterProvider) {  

  $stateProvider
    .state(‘tab‘, {
    url: "/tab",
    abstract:true,
    templateUrl: "templates/tabs.html"
  })
  .state(‘tab.tab1‘, {
    url: ‘/tab1‘,
    views:{
        ‘tab-tab1‘:{
            templateUrl: "templates/tab-tab1.html",
            controller:‘tab1Controller‘  

        }  

    }  

  })
  .state(‘tab.tab2‘, {
      url: ‘/tab2‘,
      views:{
          ‘tab-tab2‘:{
              templateUrl: "templates/tab-tab2.html",
              controller:‘tab2Controller‘
          }  

      }  

  })
  .state(‘tab.tab3‘, {
      url: ‘/tab3‘,
      views:{
          ‘tab-tab3‘:{
              templateUrl: "templates/tab-tab3.html",
              controller:‘tab3Controller‘
          }  

      }  

  })
  .state(‘tab.content1‘, {
      url: ‘/content1/:id‘,
      views:{
          ‘tab-tab1‘:{
              templateUrl: "templates/tab-content1.html",
              controller:‘content1Controller‘
          }  

      }  

  })
  .state(‘news‘, {
         url: ‘/news‘,
        templateUrl: "templates/news.html"  

      })
  $urlRouterProvider.otherwise(‘/tab/tab1‘);  

});

　　

angular.module(‘myApp.controllers‘, [])  

.controller(‘tab1Controller‘, function($scope) {  

        $scope.title=‘tab1Controller‘;  

 })
    .controller(‘tab2Controller‘, function($scope) {  

        $scope.title=‘tab2Controller‘;  

    })
    .controller(‘tab3Controller‘, function($scope) {  

        $scope.title=‘tab3Controller‘;  

    })  

    .controller(‘content1Controller‘, function($scope,$stateParams) {  

        $scope.title=‘content1Controller‘;  

        console.log($stateParams);  

    })

　　

　　

　

时间： 2024-10-13 16:20:03

ion-tap选项卡及路由结合ion-tap的相关文章

硬货 | 利用 Linux tap/tun 虚拟设备写一个 ICMP echo 程序

本文首发于我的公众号 CloudDeveloper(ID: cloud_dev),专注于干货分享,号内有大量书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 前面两篇文章已经介绍过 tap/tun 的原理和配置工具.这篇文章通过一个编程示例来深入了解 tap/tun 的程序结构. 01 准备工作 首先通过 modinfo tun 查看系统内核是否支持 tap/tun 设备驱动. [root@by ~]# modinfo tun filename: /lib/modu

微信小程序-双击长按longtap事件与tap事件冲突的解决办法

对于微信事件,不多说,自己看文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html?t=20161122 效果 首先,注意一下微信小程序事件触发顺序     单击 touchstart → touchend → tap 双击 touchstart → touchend → tap → touchstart → touchend → tap 长按 touchstart → longtap → touche

zepto的tap事件的点透问题的几种解决方案

zepto的tap事件的点透问题的几种解决方案 zepto的tap事件点透问题分析: 1.“点透”是什么 你可能碰到过在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹出层后后,这个按钮正下方的内容也会执行点击事件(或打开链接).这个被定义为这是一个“点透”现象. 在前面的项目中遇到了如下图的问题:在点击弹出来的选择组件的右上角完成后会让完成后面的input输入框聚焦,弹出输入键盘,也就是点透了 2.为什么会出现点透呢?这个需要从zepto(或者jqm)源码里面看关于tap的

CentOS下使用TUN/TAP虚拟网卡的基本教程

在计算机网络中,TUN与TAP是操作系统内核中的虚拟网络设备.不同于普通靠硬件网路板卡实现的设备,这些虚拟的网络设备全部用软件实现,并向运行于操作系统上的软件提供与硬件的网络设备完全相同的功能.TAP 等同于一个以太网设备,它操作第二层数据包如以太网数据帧.TUN模拟了网络层设备,操作第三层数据包比如IP数据封包.操作系统通过TUN/TAP设备向绑定该设备的用户空间的程序发送数据,反之,用户空间的程序也可以像操作硬件网络设备那样,通过TUN/TAP设备发送数据.在后种情况下,TUN/TAP设备向

Zepto tap 穿透bug、解决移动端点击穿透问题

当两个层重叠在一起时,或是有个弹窗,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件,特别是底层如果是input框时,必"穿 透", 现象原因: zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的 再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用 户手的接触屏幕(touchstart)和离开屏幕

Android ion异步网络和图像加载大大简化网络开发强烈推荐

Ion是一个Android异步网络和图像加载库,优雅得API大大简化了网络操作.地址:https://github.com/koush/ion 特点: 异步下载: Images into ImageViews or Bitmaps (animated GIFs supported too) JSON (via Gson) Strings Files Java types using Gson 易于使用地流式API Automatically cancels operations when the

The Android ION memory allocator

Back in December 2011, LWN reviewed the list of Android kernel patches in the linux-next staging directory. The merging of these drivers, one of which is a memory allocator called PMEM, holds the promise that the mainline kernel release can one day b

zepto的tap事件的穿透分析

首先是什么情况下会发生zepto(tap)的事件穿透: 当一个弹出层用tap点击之后这个层隐藏或者是移走,都会触发下面对应位置的点击事件(click)和一些标签的默认行为(a标签的跳转.input获取焦点). 原因: zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用 户手

防止TableView 上的tap手势隔断 cell的选择

遵循UIGestureRecognizerDelegate协议: 1.0添加手势 - (void)addTapGest {    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap)];    tap.delegate = self;    [self.tableView addGestureRecognizer:tap];} 2.拦截部分ta