如何为 ionic 中的嵌套标签栏添加幻灯片功能？答案

【问题标题】：How I can add slide feature for nested tab bar in ionic?如何为 ionic 中的嵌套标签栏添加幻灯片功能？
【发布时间】：2016-03-30 01:08:41
【问题描述】：

如果我们有六个选项卡，我如何为 ionic 框架中的嵌套选项卡栏添加滑动功能，所以我希望在移动屏幕上只显示六个选项卡中的三个选项卡，并且还可以向左或向右滑动到另一个选项卡？

我的 HTML 模板

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Tabs Example</title>

    <link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
  </head>

  <body>

    <ion-nav-bar class="nav-title-slide-ios7 bar-positive">
          <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view animation="slide-left-right"></ion-nav-view>

    <script id="templates/tabs.html" type="text/ng-template">

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

            <ion-tab title="Home" icon="ion-home" ui-sref="tabs.home">
                <ion-nav-view name="home-tab"></ion-nav-view>
            </ion-tab>

            <ion-tab title="About" icon="ion-ios7-information" ui-sref="tabs.about.page1">
                <ion-nav-view name="about-tab"></ion-nav-view>
            </ion-tab>

        </ion-tabs>

    </script>

    <script id="templates/home.html" type="text/ng-template">

        <ion-view title="Home">
            <ion-content class="padding">
               Please check about tab
            </ion-content>
        </ion-view>

    </script>

    <script id="templates/about.html" type="text/ng-template">

        <ion-view title="About">


          <ui-view name="about-page"></ui-view>

        </ion-view>

    </script>

    <script id="templates/about-page1.html" type="text/ng-template">

        <ion-view title="Page 1">
  <div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
      <div class="tabs">
   <a class="tab-item tab-item-active" ui-sref="tabs.about.page1">
     Page 1
      </a>
      <a class="tab-item" ui-sref="tabs.about.page2">
     Page 2
      </a>
       <a class="tab-item" ui-sref="tabs.about.page3">
     Page 3
      </a>  
       <a class="tab-item" ui-sref="tabs.about.page4">
Page 4      </a>
       <a class="tab-item" ui-sref="tabs.about.page5">
     Page 5
      </a>
       <a class="tab-item" ui-sref="tabs.about.page6">
     Page 6
      </a>            
      </div>
   </div>
   <ion-content class="padding has-tabs-top">
     <p> Page 1</p>
   </ion-content>
 </ion-view>

    </script>

    <script id="templates/about-page2.html" type="text/ng-template">

        <ion-view title="Page 2">
  <div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
      <div class="tabs">
   <a class="tab-item" ui-sref="tabs.about.page1">
     Page 1
      </a>
      <a class="tab-item tab-item-active" ui-sref="tabs.about.page2">
     Page 2
      </a>
       <a class="tab-item" ui-sref="tabs.about.page3">
     Page 3
      </a>  
       <a class="tab-item" ui-sref="tabs.about.page4">
Page 4      </a>
       <a class="tab-item" ui-sref="tabs.about.page5">
     Page 5
      </a>
       <a class="tab-item" ui-sref="tabs.about.page6">
     Page 6
      </a>            
      </div>
   </div>
   <ion-content class="padding has-tabs-top">
     <p> Page 2</p>
   </ion-content>
 </ion-view>

    </script>

  </body>
</html>

有关完整源代码，请查看我在codepen 上关于嵌套标签栏的问题

注意：我只是在 codepen 中的示例代码中显示六个嵌套标签栏中的两个嵌套标签栏。

【问题讨论】：

标签： angularjs ionic-framework ionic

【解决方案1】：

您可以使用 Ionic 指令（例如 on-swipe、on-swipe-left 和 on-swipe-right）在标签之间滑动导航。这是我用你的代码笔制作的一个例子。 http://codepen.io/anon/pen/bdLwPz

转到“关于”选项卡，然后单击并向左滑动。砰！魔法！在此处阅读有关手势事件的更多信息：http://ionicframework.com/docs/api/directive/onSwipe/

这里是 HTML：

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Tabs Example</title>

    <link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
  </head>

  <body ng-controller="main">

    <ion-nav-bar class="nav-title-slide-ios7 bar-positive">
          <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view animation="slide-left-right"></ion-nav-view>

    <script id="templates/tabs.html" type="text/ng-template">

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

            <ion-tab title="Home" icon="ion-home" ui-sref="tabs.home">
                <ion-nav-view name="home-tab"></ion-nav-view>
            </ion-tab>

            <ion-tab title="About" icon="ion-ios7-information" ui-sref="tabs.about.page1">
                <ion-nav-view name="about-tab" ></ion-nav-view>
            </ion-tab>

        </ion-tabs>

    </script>

    <script id="templates/home.html" type="text/ng-template">

        <ion-view title="Home">
            <ion-content class="padding">
               Please check about tab
            </ion-content>
        </ion-view>

    </script>

    <script id="templates/about.html" type="text/ng-template">

        <ion-view title="About">


          <ui-view name="about-page"></ui-view>

        </ion-view>

    </script>

    <script id="templates/about-page1.html" type="text/ng-template">

        <ion-view title="Page 1">
  <div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
      <div class="tabs">
   <a class="tab-item tab-item-active" ui-sref="tabs.about.page1">
     Page 1
      </a>
      <a class="tab-item" ui-sref="tabs.about.page2">
     Page 2
      </a>
       <a class="tab-item" ui-sref="tabs.about.page3">
     Page 3
      </a>  
       <a class="tab-item" ui-sref="tabs.about.page4">
Page 4      </a>
       <a class="tab-item" ui-sref="tabs.about.page5">
     Page 5
      </a>
       <a class="tab-item" ui-sref="tabs.about.page6">
     Page 6
      </a>            
      </div>
   </div>
   <ion-content on-swipe-left="onSwipeLeft()" class="padding has-tabs-top">
     <p> Page 1</p>
   </ion-content>
 </ion-view>

    </script>

    <script id="templates/about-page2.html" type="text/ng-template">

        <ion-view title="Page 2">
  <div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
      <div class="tabs">
   <a class="tab-item" ui-sref="tabs.about.page1">
     Page 1
      </a>
      <a class="tab-item tab-item-active" ui-sref="tabs.about.page2">
     Page 2
      </a>
       <a class="tab-item" ui-sref="tabs.about.page3">
     Page 3
      </a>  
       <a class="tab-item" ui-sref="tabs.about.page4">
Page 4      </a>
       <a class="tab-item" ui-sref="tabs.about.page5">
     Page 5
      </a>
       <a class="tab-item" ui-sref="tabs.about.page6">
     Page 6
      </a>            
      </div>
   </div>
   <ion-content class="padding has-tabs-top">
     <p> Page 2</p>
   </ion-content>
 </ion-view>

    </script>

  </body>
</html>

和 JS：

angular.module('ionicApp', ['ionic'])

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

    $stateProvider

    .state('tabs', {
        url: "/tab",
        abstract: true,
        templateUrl: "templates/tabs.html"
    })

    .state('tabs.home', {
        url: "/home",
        views: {
            'home-tab': {
                templateUrl: "templates/home.html",
            }
        }
    })

    .state('tabs.about', {
        url: "/about",
        abstract: true,
        views: {
            'about-tab': {
                templateUrl: "templates/about.html"
            }
        }
    })

    .state('tabs.about.page1', {
        url: "/page1",
        views: {
            'about-page': {
                templateUrl: "templates/about-page1.html"
            }
        }
    })

    .state('tabs.about.page2', {
        url: "/page2",
        views: {
            'about-page': {
                templateUrl: "templates/about-page2.html"
            }
        }
    });

    $urlRouterProvider.otherwise("/tab/home");

})
.controller('main', function($scope, $state){

  $scope.onSwipeLeft = function(){
    $state.go('tabs.about.page2')
  };

})

【讨论】：

谢谢，但是我如何从 6 个嵌套选项卡中制作 3 个嵌套选项卡以显示在一个屏幕移动设备上，这样我就可以像 my concept 一样向左或向右滑动？
您查看了我做对的代码笔，我只是在您的代码中添加了滑动功能。

【解决方案2】：

请检查以下链接。这就是您可能正在寻找的。p>

https://github.com/JKnorr91/ion-slide-box-tabs

<ion-content scroll="false">
<ion-slide-box show-pager="false" ion-slide-tabs>
    <ion-slide ion-slide-tab-label="test"><h1>Tab 1</h1></ion-slide>
    <ion-slide ion-slide-tab-label="secondTest"><h1>Tab 2</h1></ion-slide>
    <ion-slide ion-slide-tab-label="<b>boldTest</b>"><h1>Tab 3</h1></ion-slide>
</ion-slide-box>

将slidingTabsDirective.js 添加到您的Ionic 项目并将其包含在您的index.html 中。

示例：如果您将slidingTabsDirective.js 放到您的js 文件夹中，您应该将以下行粘贴到您的index.html 中包含离子后的任何位置。

<script src="js/slidingTabsDirective.js"></script>

将 SCSS 或来自 slipTabs.scss 或 slipTabs.css 的 CSS 代码添加到您的项目样式中。

所有必需的文件和示例都可以在我获得它的 gitup 存储库中找到。

【讨论】：