how to make sure slide tab shows 3 tabs in html

2019-07-11 14:27发布

站内问答 / JavaScript
497 1 4

I have an app in mobile. The mobile screen is small and unable to shows all 7 tabs at once. So, it will display as two rows of tabs which is not tidy.

I want it to display 3 tabs at one time. Example, at slide 2, it will shows the tabs of slide 1 on left, slide 2 at the center and slide 3 at the right. When I slide to page 3, slide tab 2 at the left, slide tab 3 at the center and slide tab 4 at the right. That means, the slide tab is moving.

It is in ionic 1 framework but I believe it is related to html.

This my snippet

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>

1条回答
戒情不戒烟
2楼-- · 2019-07-11 14:40

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

Here is what I came up with. The gist of it is a function that looks to see what tab you're on, and will only display other tabs if they are within one tab of the current tab. Exception being on the endpoints to show either the next 2 tabs in front (being at index 0) or the previous two tabs (being at index 6 (for this example)). This will maintain 3 tabs in view all at once. I hide tabs by applying a CSS class to elements to set their display to 'none'.

One thing to note is that my suggested solution doesn't attempt to get rid of the "dots" (I forget the name of this) along the bottom. Reason for this is that it would be poor User Interface design to not show the true number of tabs available to a user at any given time.

In fact, I would even go so far as to recommend against trying to make tabs at all from being shown (Android used to have sliding tabs in its menu system, but got rid of them due to poor UX -- people weren't able to tell that they were slide-able). Within Android, the TabHost has been deprecated since UX people decided that tabs really weren't a great thing to do on mobile due to the exact problem that you're facing. If you can, I would look into different methods of having the user interact with your app. Perhaps a hamburger menu with the different tab options? It depends on your user's needs, of course. maybe just scrap the tabs entirely and keep /only/ the dots along the bottom to indicate to user's that they have more screens to scroll through (e.g. Snapchat does this).

Getting back to your question though, I doubt that there is a 'purely' HTML solution to showing/not showing tabs, as HTML is only the content of the page, not the visuals(CSS) or the behavior(JS) of the page. You may look into working with CSS selectors with the pseudo-selectors though, but it might end up with lots of hard-coded rules (using ids, etc.) if you wanted a solution that avoids JS.

Here are the changes to your code that I made:

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)