Ionic Js二十：选项卡栏操作

最新推荐文章于 2024-04-26 16:55:06 发布

aochou19810706

最新推荐文章于 2024-04-26 16:55:06 发布

阅读量97

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/quickcodes/p/Ionic-Js-er-shi-xuan-xiang-ka-lan-cao-zuo.html

版权

ion-tabs
ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。
对于 iOS，它会出现在屏幕的底部，Android会出现在屏幕的顶部(导航栏下面)。
用法

<ion-tabs class="tabs-positive tabs-icon-only">

  <ion-tab title="首页" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
    <!-- 标签 1 内容 -->
  </ion-tab>

  <ion-tab title="关于" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
    <!-- 标签 2 内容 -->
  </ion-tab>

  <ion-tab title="设置" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
    <!-- 标签 3 内容 -->
  </ion-tab>

</ion-tabs>

ion-tab
隶属于ionTabs
包含一个选项卡内容。该内容仅存在于被选中的给定选项卡中。
每个ionTab都有自己的浏览历史。
用法

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

$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);
  }
}

转载于:https://www.cnblogs.com/quickcodes/p/Ionic-Js-er-shi-xuan-xiang-ka-lan-cao-zuo.html

aochou19810706

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ionic Js二十：选项卡栏操作

ion-tabsion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。对于 iOS，它会出现在屏幕的底部，Android会出现在屏幕的顶部(导航栏下面)。用法<ion-tabs class="tabs-positive tabs-icon-only"> <ion-tab title="首页" icon-on="io...
复制链接

扫一扫