Question

如果我们有六个标签，我如何为离子框架中的嵌套标签栏添加幻灯片功能，以便我只想在移动屏幕上显示六个标签中的三个标签，还可以向左或向右滑动到另一个标签？

我的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

上有关嵌套标签栏的问题

注意：我只在代码集中的示例代码中显示了六个嵌套选项卡栏中的两个嵌套选项卡栏。

Answer 1

您可以使用Ionic指令（例如滑动时，向上滑动左键和向上滑动右键）在选项卡之间滑动导航。这是我用你的代码笔做的一个例子。 http://codepen.io/anon/pen/bdLwPz

转到about选项卡，然后单击并向左滑动。 BAM！魔法！在此处阅读有关手势事件的更多信息：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')
  };

})

Answer 2

请检查以下链接。这就是你可能正在寻找的东西。

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

var a = 800;
var b = a.toString();
var first = b.replace(b.substring(b.length - 2),":"+b.substring(b.length - 2));

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

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

<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>

将slidingTabs.scss或slidingTabs.css中的SCSS或CSS代码添加到项目样式中。

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

我如何为离子中的嵌套标签栏添加幻灯片功能？

2 个答案: