当前位置:

首页 > 系统应用 > ionic 选项卡栏操作

ionic 选项卡栏操作

本文目录

    ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航栏下面)。 用法 实例 效果如下所示: API 属性 类型 详情 delegate-handle (可选) 字符串 该句柄用$i

    ion-tabs

    ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。

    ionic 选项卡栏操作

    对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航栏下面)。

    用法

    实例

    
    
        
      
    
        
      
    
        
      
    

    效果如下所示:

    API

    属性 类型 详情
    delegate-handle (可选) 字符串

    该句柄用$ionicTabsDelegate来标识这些选项卡。

    ion-tab

    隶属于ionTabs

    包含一个选项卡内容。该内容仅存在于被选中的给定选项卡中。

    每个ionTab都有自己的浏览历史。

    用法

    
    

    API

    属性 类型 详情
    title 字符串

    选项卡的标题。

    href (可选) 字符串

    当触碰的时候,该选项卡将会跳转的的链接。

    icon (可选) 字符串

    选项卡的图标。如果给定值,它将成为ion-on和ion-off的默认值。

    icon-on (可选) 字符串

    被选中标签的图标。

    icon-off (可选) 字符串

    没被选中标签的图标。

    badge (可选) 表达式

    选项卡上的徽章(通常是一个数字)。

    badge-style (可选) 表达式

    选项卡上微章的样式(例,tabs-positive )。

    on-select (可选) 表达式

    选项卡被选中时触发。

    on-deselect (可选) 表达式

    选项卡取消选中时触发。

    ng-click (可选) 表达式

    一般情况下,点击某个选项卡后,它会自动进入选中状态。可一旦给它加上了 ng-Click,默认的选中行为就不会生效了。遇到这种情况,就需要通过$ionicTabsDelegate.select()来手动指定切换到哪个标签。

    $ionicTabsDelegate

    授权控制ionTabs指令。

    该方法直接调用$ionicTabsDelegate服务,控制所有ionTabs指令。用$getByHandle方法控制具体的ionTabs实例。

    用法

    
      
    
          你好,标签1!
          
        
        你好标签2!
    
    
    function MyCtrl($scope, $ionicTabsDelegate) {
      $scope.selectTabWithIndex = function(index) {
        $ionicTabsDelegate.select(index);
      }
    }

    方法

    select(index, [shouldChangeHistory])

    选择标签来匹配给定的索引。

    参数 类型 详情
    index 数值

    选择标签的索引。

    shouldChangeHistory (可选) 布尔值

    这个选项用来决定:遇到这个标签时,是继续加载它已有的浏览历史(如果之前已经存在),还是只打开默认页面。默认值是 false。顺带提醒一句,如果某个ion-na v-view放在选项卡里,通常会更适合把它设为 true。

    selectedIndex()

    返回值: 数值, 被选中标签的索引,如 -1。

    $getByHandle(handle)
    参数 类型 详情
    handle 字符串

    例如:

    $ionicTabsDelegate.$getByHandle('my-handle').select(0);
    本文内容来源于网友投稿,如有侵权请联系删除。
    作者最新文章
    系统应用
    上一篇: jQuery Mobile 教程
    下一篇: ionic 加载动画
    相关文章 更多
    win10忘记当前密码了怎么处理完整方法
    win10忘记当前密码了怎么处理完整方法

    Windows 10忘记开机密码如何处理?本文根据账户类型(Microsoft账户/本地账户/PIN)提供官方支持的恢复步骤,包括在线重置、安全问题回答及管理员重置方法,避免数据丢失风险。

    win10更新提示不断弹出如何永久关闭通知
    win10更新提示不断弹出如何永久关闭通知

    Windows 10更新提示频繁弹窗怎么办?本文详解如何通过Windows更新高级选项、系统通知设置及暂停更新功能,精准关闭不必要的重启提醒和横幅通知,同时确保系统安全更新不受影响。适用于家庭及个人用户,区分个人设置与企业策略管理。

    win10家庭版能不能取消开机密码,操作步骤是什么
    win10家庭版能不能取消开机密码,操作步骤是什么

    Win10家庭版如何取消开机密码?本文详解本地账户清空密码步骤及Microsoft账户自动登录设置方法,分析安全风险与例外情况,帮助用户在便捷与安全间做出合理选择。

    win10取消开机密码出现两个登录账户要怎么处理
    win10取消开机密码出现两个登录账户要怎么处理

    解决Win10取消开机密码后登录界面显示两个账户的问题。通过检查账户类型、重新配置netplwiz自动登录及清理多余用户,确保系统正常启动且数据安全。

    win10取消开机密码操作失败是什么原因怎么排查
    win10取消开机密码操作失败是什么原因怎么排查

    遇到Win10无法取消开机密码?可能是Microsoft账户限制、域策略禁止空密码或自动登录未同步。本文详解如何区分账户类型、检查本地安全策略,以及使用PIN码替代传统密码的快速登录方案。

    win10netplwiz没有勾选框该怎么取消开机密码
    win10netplwiz没有勾选框该怎么取消开机密码

    解决Win10运行netplwiz找不到“用户必须输入用户名和密码”勾选框的问题。通过关闭Windows Hello强制登录、检查账户类型及正确填写凭据,实现开机自动进入桌面。适用于个人电脑优化启动体验,注意区分自动登录与删除密码的安全差异。

    win10怎么取消开机密码新手完整操作教程
    win10怎么取消开机密码新手完整操作教程

    新手如何取消Win10开机密码?本文详解区分账户类型、清空本地密码及配置netplwiz自动登录的步骤,厘清PIN码与密码区别,提供安全可行的免密启动方案。

    win10关闭WindowsHello后如何取消开机密码
    win10关闭WindowsHello后如何取消开机密码

    Win10关闭Windows Hello后开机仍要密码?本文详解如何删除PIN码、设置netplwiz自动登录以及清空本地账户密码,解决开机免密登录问题。

    win10取消开机密码要不要关闭屏幕保护密码
    win10取消开机密码要不要关闭屏幕保护密码

    想取消Win10开机密码?先分清是启动登录还是屏保恢复。本文详解如何通过netplwiz设置自动登录,以及如何关闭屏幕保护恢复时的登录验证,同时保留睡眠唤醒的安全设置,确保操作准确且不影响电脑安全。

    win10微软账户如何取消开机密码直接进桌面
    win10微软账户如何取消开机密码直接进桌面

    想在Win10开机时跳过密码直接进入桌面?本文详解Microsoft账户下的PIN设置、本地账户切换及netplwiz自动登录配置,并区分开机验证与锁屏恢复设置,助你安全高效地优化登录体验。

    查看更多
    精品专题 更多
    装机必备
    装机必备

    正软商城装机必备专区,精选办公、浏览器、安全防护、影音播放、压缩解压、设计创作和系统工具等电脑常用正版软件,帮助用户快速完成新电脑软件配置。

    Windows
    Windows

    正软商城Windows软件专区,汇集适用于Windows电脑的办公、设计、安全防护、影音播放、开发工具和系统优化软件,提供软件介绍、系统要求、正版授权及购买下载服务。

    macOS软件
    macOS软件

    正软商城macOS软件专区,精选适用于Mac电脑的办公、设计、影音、效率、开发和系统工具,提供软件功能介绍、macOS兼容版本、正版授权及购买下载服务。

    Mac软件 更多
    photoshop
    photoshop
    Windows、macOS 、 iPad

    Photoshop 2026 是 Adobe 推出的专业图像处理与视觉设计软件,支持 Windows、macOS 和 iPad 等平台,广泛应用于摄影修图、电商设计、平面海报、数字绘画及视觉合成等创作场景。

    Blender
    Blender
    Windows、macOS 和 Linux

    Blender 是一款免费开源、跨平台的专业 3D 创作软件,集建模、动画、渲染、视频编辑与视觉合成等功能于一体,广泛应用于影视动画、游戏设计和建筑可视化等领域。软件支持 Cycles 物理渲染器与 Eevee 实时渲染引擎,并提供多边形建模、骨骼绑定、物理模拟等专业工具。Blender 兼容 Windows、macOS 和 Linux 系统,安装包轻巧、运行流畅,依托活跃的全球开发者社区持续更新,是从初学者到专业创作者都值得选择的正版 3D 创作工具。

    灵活计算器
    灵活计算器
    macOS/iOS/Android

    灵活计算器是一款笔记式算数应用,支持实时计算、动态关联和云端同步功能。记录、整理和输出之间的过渡会更自然,适合长期写作、做笔记或持续沉淀个人内容。

    WINDOWS 更多
    3dmax(3ds max)
    3dmax(3ds max)
    Windows

    Autodesk 3ds Max 是一款专业的三维建模、动画与渲染软件,广泛应用于建筑可视化、游戏开发、影视动画、广告设计和产品展示等领域。

    photoshop
    photoshop
    Windows、macOS 、 iPad

    Photoshop 2026 是 Adobe 推出的专业图像处理与视觉设计软件,支持 Windows、macOS 和 iPad 等平台,广泛应用于摄影修图、电商设计、平面海报、数字绘画及视觉合成等创作场景。

    Blender
    Blender
    Windows、macOS 和 Linux

    Blender 是一款免费开源、跨平台的专业 3D 创作软件,集建模、动画、渲染、视频编辑与视觉合成等功能于一体,广泛应用于影视动画、游戏设计和建筑可视化等领域。软件支持 Cycles 物理渲染器与 Eevee 实时渲染引擎,并提供多边形建模、骨骼绑定、物理模拟等专业工具。Blender 兼容 Windows、macOS 和 Linux 系统,安装包轻巧、运行流畅,依托活跃的全球开发者社区持续更新,是从初学者到专业创作者都值得选择的正版 3D 创作工具。