スライドタブがhtmlの3つのタブを表示する方法

私はモバイルアプリを持っています。モバイル画面は小さく、一度に7つのタブすべてを表示することはできません。したがって、整頓されていないタブの2つの行として表示されます。スライドタブがhtmlの3つのタブを表示する方法

一度に3つのタブを表示します。たとえば、スライド2では、スライド1のタブが左側に、スライド2が中央に、スライド3が右側に表示されます。私が3ページにスライドすると、左側のタブ2をスライドさせ、中央のタブ3をスライドさせ、右側のタブ4をスライドさせます。つまり、スライドタブが動いています。

イオン1のフレームワークですが、htmlに関連していると思います。ここで

この私のスニペット

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

 
.controller('MyCtrl', function($scope,$ionicSlideBoxDelegate) { 
 
    
 
    $scope.slideIndex = 0; 
 

 
      // Called each time the slide changes 
 
     $scope.slideChanged = function(index) { 
 
      $scope.slideIndex = index;   
 

 
      
 

 
     }; 
 

 
     $scope.activeSlide = function (index) { 
 
      $ionicSlideBoxDelegate.slide(index); 
 
     }; 
 
});

body { 
 
    cursor: url('https://ionicframework.com/img/finger.png'), auto; 
 
} 
 

 
.slide-tab{ 
 
    display: table; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    width: 100%; 
 
    background-color: #eff0f2; 
 
    border-bottom: 2px solid #00897B; 
 

 
} 
 

 
.slide-tab li{ 
 
    float: left; 
 
    line-height: 38px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
} 
 

 
.slide-tab a{ 
 
    background-color: #eee0f2; 
 
    border-bottom: 1px solid #fff; 
 
    color: #e81; 
 
    font-weight: 500; 
 
    display: block; 
 
    letter-spacing: 0; 
 
    outline: none; 
 
    padding: 0 20px; 
 
    text-decoration: none; 
 
    -webkit-transition: all 0.2s ease-in-out; 
 
    -moz-transition: all 0.2s ease-in-out; 
 
    transition: all 0.2s ease-in-out; 
 
    border-bottom: 2px solid #00897B; 
 
} 
 
.current a{ 
 
    color: #efe; 
 
    background: #00897B; 
 
}

<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>Ionic Slide Tab</title> 
 

 
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
 
    
 
    </head> 
 
    <body ng-controller="MyCtrl"> 
 

 
    <ion-header-bar class="bar-positive"> 
 
     <h1 class="title">Ionic Slide Tab</h1> 
 
    </ion-header-bar> 
 

 
    <ion-content> 
 
     <div class="row"> 
 
     <ul class="slide-tab"> 
 
      <li ng-class="slideIndex == 0 ? 'current':''"><a href="#" ng-click="activeSlide(0)">Tab01</a></li> 
 
      <li ng-class="slideIndex == 1 ? 'current':''"><a href="#" ng-click="activeSlide(1)">Tab02</a></li> 
 
      <li ng-class="slideIndex == 2 ? 'current':''"><a href="#" ng-click="activeSlide(2)">Tab03</a></li> 
 
      <li ng-class="slideIndex == 3 ? 'current':''"><a href="#" ng-click="activeSlide(3)">Tab04</a> 
 
      
 
      </li> 
 
      <li ng-class="slideIndex == 4 ? 'current':''"><a href="#" ng-click="activeSlide(4)">Tab05</a></li> 
 
      <li ng-class="slideIndex == 5 ? 'current':''"><a href="#" ng-click="activeSlide(5)">Tab06</a></li> 
 
      <li ng-class="slideIndex == 6 ? 'current':''"><a href="#" ng-click="activeSlide(6)">Tab07</a></li> 
 
    
 
     </ul> 
 
     </div> 
 
     <ion-slide-box on-slide-changed="slideChanged(index)" active-slide="slideIndex" class="padding"> 
 
      <ion-slide> 
 
       <h3>Tab 1</h3> 
 
       <p>Page 1</p> 
 
      </ion-slide> 
 
      <ion-slide> 
 
       <h3>Tab 2</h3> 
 
       <p>Page 2</p> 
 
      </ion-slide> 
 
      <ion-slide> 
 
       <h3>Tab 3</h3> 
 
       <p>Page 3</p> 
 
      </ion-slide> 
 
      <ion-slide> 
 
       <h3>Tab 4</h3> 
 
       <p>page 4</p> 
 
      </ion-slide> 
 
      <ion-slide> 
 
       <h3>Tab 5</h3> 
 
       <p>page 5</p> 
 
      </ion-slide> 
 
      <ion-slide> 
 
       <h3>Tab 6</h3> 
 
       <p>page 6</p> 
 
      </ion-slide> 
 
      <ion-slide> 
 
       <h3>Tab 7</h3> 
 
       <p>page 7</p> 
 
      </ion-slide> 
 
     </ion-slide-box> 
 
    </ion-content> 
 

 
    </body> 
 
</html>

出典

2017-06-16 bkcollection

https://jsbin.com/jarepefixe/edit?html,js,output

は私が思いついたものです。その要点は、現在のタブの1つのタブ内にある場合のみ、どのタブが表示されているかを調べ、他のタブを表示する機能です。終点には、前の2つのタブ（インデックス0にある）または前の2つのタブ（この例ではインデックス6にある）のいずれかを表示する例外があります。これにより、3つのタブが一度にすべて表示されます。 CSSクラスを要素に適用してタブを非表示にし、表示を「なし」に設定します。

私の提案する解決策は、底に沿って「ドット」（この名前は忘れてしまいます）を取り除こうとしないということです。この理由は、いつでもユーザが利用できる実際のタブの数を表示しないようにするUIの設計が貧弱なことです。

実際、タブを表示しようとすることを推奨しないようにするには、Androidはメニューシステムにタブをスライドさせていましたが、UXが貧弱なためにそれらを取り除きました彼らがスライド可能であることを伝えることができませんでした）。 Androidの中では、UXの人々はあなたが直面している厳しい問題のためにタブが実際にはモバイル上ですばらしいことではないと判断して以来、非難されています。可能であれば、ユーザーにあなたのアプリとやりとりさせるさまざまな方法を調べます。おそらく異なるタブオプションを持つハンバーガーメニューですか？もちろん、ユーザーのニーズによって異なります。タブを完全にスクラップして、ドットを下に沿って保持するだけで、スクロールする画面が増えていることをユーザーに示すことができます（例：Snapchatがこれを行います）。

質問に戻ると、HTMLはページの内容であり、ビジュアル（CSS）や動作（JS）ではないので、タブを表示/非表示するための「純粋な」HTMLソリューションがあるとは思えません。）のページです。あなたは疑似セレクタを使ってCSSセレクタを扱うことができますが、JSを避けるソリューションが必要な場合は、ハードコードされたルール（IDなどを使用）がたくさんあります。

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

 
.controller('MyCtrl', function($scope,$ionicSlideBoxDelegate) { 
 

 
    $scope.slideIndex = 0; 
 

 
    // Called each time the slide changes 
 
    $scope.slideChanged = function(index) { 
 
    $scope.slideIndex = index; 
 
    }; 
 

 
    $scope.activeSlide = function (index) { 
 
    $ionicSlideBoxDelegate.slide(index); 
 
    }; 
 
    $scope.is_plus_or_minus_one = function (questionable_index, current_index) { 
 
    return Math.abs(questionable_index - current_index) <= 1; 
 
    } 
 

 
    $scope.determine_class = function (index) { 
 
    let return_class = ''; 
 
    let min = 0; // lowest tab index 
 
    let max = 6; // highest tab index 
 
    if ($scope.slideIndex === index) 
 
     return_class = 'current'; 
 
    else if ($scope.is_plus_or_minus_one(index, $scope.slideIndex) || 
 
      ($scope.slideIndex === min && index === min + 2) || 
 
      ($scope.slideIndex === max && index === max - 2)) 
 
     return_class = ''; 
 
    else 
 
     return_class = 'hidden'; 
 
    return return_class; 
 
    } 
 
});

body { 
 
    cursor: url('https://ionicframework.com/img/finger.png'), auto; 
 
} 
 

 
/* FIXME: just using this for testing (making sure dot behavior remains intact without having to scroll) 
 
.scroll-content { 
 
    bottom: auto!important; 
 
} 
 
*/ 
 

 
.slide-tab{ 
 
    display: table; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    width: 100%; 
 
    background-color: #eff0f2; 
 
    border-bottom: 2px solid #00897B; 
 

 
} 
 

 
.slide-tab li{ 
 
    float: left; 
 
    line-height: 38px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
} 
 

 
.slide-tab a{ 
 
    background-color: #eee0f2; 
 
    border-bottom: 1px solid #fff; 
 
    color: #e81; 
 
    font-weight: 500; 
 
    display: block; 
 
    letter-spacing: 0; 
 
    outline: none; 
 
    padding: 0 20px; 
 
    text-decoration: none; 
 
    -webkit-transition: all 0.2s ease-in-out; 
 
    -moz-transition: all 0.2s ease-in-out; 
 
    transition: all 0.2s ease-in-out; 
 
    border-bottom: 2px solid #00897B; 
 
} 
 
.current a{ 
 
    color: #efe; 
 
    background: #00897B; 
 
} 
 

 
.hidden a { 
 
    /* you could just hide them visually, but i don't think that's what you want... 
 
    visibility: hidden; 
 
    */ 
 
    /* or you could displace them from the DOM which should get the desired effect */ 
 
    display:none; 
 
    /**/ 
 
}

<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>Ionic Slide Tab</title> 
 

 
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
 
    
 
    </head> 
 
    <body ng-controller="MyCtrl"> 
 

 
    <ion-content> 
 
     <div class="row"> 
 
     <ul class="slide-tab"> 
 
      <li ng-class="determine_class(0)"><a href="#" ng-click="activeSlide(0)">Tab01</a></li> 
 
      <li ng-class="determine_class(1)"><a href="#" ng-click="activeSlide(1)">Tab02</a></li> 
 
      <li ng-class="determine_class(2)"><a href="#" ng-click="activeSlide(2)">Tab03</a></li> 
 
      <li ng-class="determine_class(3)"><a href="#" ng-click="activeSlide(3)">Tab04</a></li> 
 
      <li ng-class="determine_class(4)"><a href="#" ng-click="activeSlide(4)">Tab05</a></li> 
 
      <li ng-class="determine_class(5)"><a href="#" ng-click="activeSlide(5)">Tab06</a></li> 
 
      <li ng-class="determine_class(6)"><a href="#" ng-click="activeSlide(6)">Tab07</a></li> 
 
    
 
     </ul> 
 
     </div> 
 
     <ion-slide-box on-slide-changed="slideChanged(index)" active-slide="slideIndex" class="padding"> 
 
      <ion-slide> 
 
       <h3>Tab 1</h3> 
 
       <p>Page 1</p> 
 
      </ion-slide> 
 
      <ion-slide> 
 
       <h3>Tab 2</h3> 
 
       <p>Page 2</p> 
 
      </ion-slide> 
 
      <ion-slide> 
 
       <h3>Tab 3</h3> 
 
       <p>Page 3</p> 
 
      </ion-slide> 
 
      <ion-slide> 
 
       <h3>Tab 4</h3> 
 
       <p>page 4</p> 
 
      </ion-slide> 
 
      <ion-slide> 
 
       <h3>Tab 5</h3> 
 
       <p>page 5</p> 
 
      </ion-slide> 
 
      <ion-slide> 
 
       <h3>Tab 6</h3> 
 
       <p>page 6</p> 
 
      </ion-slide> 
 
      <ion-slide> 
 
       <h3>Tab 7</h3> 
 
       <p>page 7</p> 
 
      </ion-slide> 
 
     </ion-slide-box> 
 
    </ion-content> 
 

 
    </body> 
 
</html>

出典

2017-06-18 23:16:03 masquarainian

おかげでたくさん：ここ

は私が作ったあなたのコードを変更しています。まさに私が望むもの – bkcollection

スライドタブがhtmlの3つのタブを表示する方法

答えて

関連する問題