阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Ionic 选项卡栏操作

      ionic 选项卡栏操作

      ion-tabs

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

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

      用法

      实例

      <ion-tabs class="tabs-positive tabs-icon-only">
      
        <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
          <!-- 标签 1 内容 -->
        </ion-tab>
      
        <ion-tab title="关于" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
          <!-- 标签 2 内容 -->
        </ion-tab>
      
        <ion-tab title="设置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
          <!-- 标签 3 内容 -->
        </ion-tab>
      </ion-tabs>
      

      API

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

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

      ion-tab

      隶属于 ionTabs

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

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

      用法

      <ion-tab
        title="Tab!"
        icon="my-icon"
        href="#/tab/tab-link"
        on-select="onTabSelected()"
        on-deselect="onTabDeselected()">
      </ion-tab>
      

      API

      属性Arrt_Type详情
      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 实例。

      用法

      <body ng-controller="MyCtrl">
        <ion-tabs>
      
          <ion-tab title="Tab 1">
            你好,标签1!
            <button ng-click="selectTabWithIndex(1)">选择标签2</button>
          </ion-tab>
          <ion-tab title="Tab 2">你好标签2!</ion-tab>
      
        </ion-tabs>
      </body>
      
      function MyCtrl($scope, $ionicTabsDelegate) {
        $scope.selectTabWithIndex = function(index) {
          $ionicTabsDelegate.select(index);
        }
      }
      

      方法

      select(index, [shouldChangeHistory])
      

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

      <table class="reference">
        <thead>
          <tr>
            <th>参数</th>
            <th>类型</th>
            <th>详情</th>
          </tr>
        </thead>
        <tbody>
      
          <tr>
            <td>
              index
            </td>
            <td>
      
        <code>数值</code>
            </td>
            <td>
              <p>选择标签的索引。</p>
            </td>
          </tr>
      
          <tr>
            <td>
              shouldChangeHistory
      
              <div><em>(可选)</em></div>
            </td>
            <td>
      
        <code>布尔值</code>
            </td>
            <td>
              <p>此选项是否应该加载这个标签的浏览历史(如果存在),并使用,或仅加载默认页面。默认为false。提示:如果一个<code>ion-nav-view</code>在选项卡里,你可能需要设置它为true。</p>
      
      
            </td>
          </tr>
      
        </tbody>
      </table>
      
      selectedIndex()
      

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

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

      例如:

      $ionicTabsDelegate.$getByHandle('my-handle').select(0);
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录