如何确保幻灯片选项卡在html中显示3个选项卡 [英] how to make sure slide tab shows 3 tabs in html

问题描述

我有一个移动应用程序。手机屏幕很小，无法一次显示全部7个标签。因此，它会显示为两行标签，不整齐。

我希望它一次显示3个选项卡。例如，在幻灯片2中，它将显示左侧幻灯片1的标签，幻灯片2在中间，幻灯片3在右侧。当我滑动到第3页时，滑动左侧的标签2，滑动中间的标签3并滑动右侧的标签4。这意味着，幻灯片标签正在移动。

它在离子1框架中，但我相信它与html有关。

这段代码

angular.module（'ionicApp'， ['ionic']）。controller（'MyCtrl'，function（$ scope，$ ionicSlideBoxDelegate）{$ scope.slideIndex = 0; //每次幻灯片更改时调用$ scope.slideChanged = function（index）{$ scope。

  body {cursor：url（'https://ionicframework.com/img/finger.png'），auto;}。slide-tab {display：表;溢出：隐藏;保证金：0;宽度：100％; background-color：＃eff0f2; border-bottom：2px solid＃00897B;}。slide-tab li {float：left; line-height：38px;溢出：隐藏; padding：0;}。slide-tab a {background-color：＃eee0f2; border-bottom：1px solid #fff;颜色：＃e81; font-weight：500;显示：块; letter-spacing：0;概要：无; padding：0 20px;文字修饰：无; -webkit-transition：全部0.2s缓和; -moz-transition：全部0.2s缓进;转型：全部0.2s缓出; border-bottom：2px solid＃00897B;}。current a {color：#efe;背景：＃00897B;}  

< html ng-app = ionicApp > < HEAD> < meta charset =utf-8> < meta name =viewportcontent =initial-scale = 1，maximum-scale = 1，user-scalable = no，width = device-width> < title>离子幻灯片标签< / title> < link href =// code.ionicframework.com/nightly/css/ionic.css =stylesheet> < script src =// code.ionicframework.com/nightly/js/ionic.bundle.js\"> ;</script> < /头> < body ng-controller =MyCtrl> < ion-header-bar class =bar-positive> < h1 class =title>离子幻灯片标签< / h1> < /离子头杆> <离子含量> < div class =row> < ul class =slide-tab> < li ng-class =slideIndex == 0？'current'：''>< a href =＃ng-click =activeSlide（0）> Tab01< / a><李> < li ng-class =slideIndex == 1？'current'：''>< a href =＃ng-click =activeSlide（1）> Tab02< / a><李> < li ng-class =slideIndex == 2？'current'：''>< a href =＃ng-click =activeSlide（2）> Tab03< / a><李> < li ng-class =slideIndex == 3？'current'：''>< a href =＃ng-click =activeSlide（3）> Tab04< / a> < /锂> < li ng-class =slideIndex == 4？'current'：''>< a href =＃ng-click =activeSlide（4）> Tab05< / a><李> < li ng-class =slideIndex == 5？'current'：''>< a href =＃ng-click =activeSlide（5）> Tab06< / a><李> < li ng-class =slideIndex == 6？'current'：''>< a href =＃ng-click =activeSlide（6）> Tab07< / a><李> < / UL> < / DIV> < ion-slide-box on-slide-changed =slideChanged（index）active-slide =slideIndexclass =padding> <离子滑动> < h3>标签1< / h3> < p>页1< / p> < /离子滑动> <离子滑动> < h3>标签2< / h3> < p>第2页< / p> < /离子滑动> <离子滑动> < h3>标签3< / h3> < p>第3页< / p> < /离子滑动> <离子滑动> < h3>标签4< / h3> < p>第4页< / p> < /离子滑动> <离子滑动> < h3>标签5< / h3> < p>第5页< / p> < /离子滑动> <离子滑动> < h3>标签6< / h3> < p>第6页< / p> < /离子滑动> <离子滑动> < h3>标签7< / h3> < p>第7页< / p> < /离子滑动> < /离子滑动框> < /离子含量> < / body>< / html>

解决方案

https://jsbin.com/jarepefixe/edit?html ，js，输出

下面是我想到的。它的要点是看看你正在使用哪个标签，并且只会显示其他标签，如果它们在当前标签的一个标签内。例外情况是在端点上显示前两个选项卡（位于索引0）或前两个选项卡（位于索引6（对于本示例））。这将一次保留3个标签。我通过将CSS类应用于元素以将其显示设置为'none'来隐藏选项卡。

需要注意的一件事是，我建议的解决方案不会试图摆脱沿着底部的点（我忘记了这个名字）。原因在于，它会是糟糕的用户界面设计，不能在任何给定时间显示用户可用的标签的真实数量。实际上，我甚至会推荐反对试图制作标签以避免显示（Android在其菜单系统中使用滑动标签，但是由于用户体验差而被淘汰 - 人们无法判断他们是否可以滑动）。在Android中，TabHost已被弃用，因为UX用户认为，由于您面临的确切问题，选项卡在手机上确实不是一件好事。如果可以的话，我会研究让用户与您的应用进行交互的不同方法。也许是一个汉堡包菜单与不同的选项卡选项？当然，这取决于用户的需求。也许只是完全弃用这些标签，并且只保留/仅沿底部的点来向用户指出他们有更多的屏幕可以滚动浏览（例如，Snapchat就是这样做的）。

回到你的问题，我怀疑是否存在一个纯粹的HTML解决方案来显示/不显示标签，因为HTML只是页面的内容，而不是页面的视觉效果（CSS）或行为（JS） 。您可能会考虑使用伪选择器来处理CSS选择器，但如果您想要避免使用JS的解决方案，它可能会有大量硬编码规则（使用ID等）。

以下是我对代码所做的更改：

  angular.module（'ionicApp'，['ionic']）.control（'MyCtrl'，function（$ scope，$ ionicSlideBoxDelegate）{$ scope.slideIndex = 0; //每次幻灯片更改时调用$ 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）{返回Math.abs（questionable_index  -  current_index）< = 1;} $ scope.determine_class = function（index）{let return_class ='';让min = 0; //最低标签索引let max = 6; //最高标签索引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& amp; amp; ;& index === max  -  2））return_class =''; else return_class ='hidden'; return return_class; }}）;  

body {cursor：url（'https ：//ionicframework.com/img/finger.png'），auto;} / * FIXME：使用它进行测试（确保点行为保持完整无需滚动）.scroll-content {bottom：auto！important; } * /。slide-tab {display：table;溢出：隐藏;保证金：0;宽度：100％; background-color：＃eff0f2; border-bottom：2px solid＃00897B;}。slide-tab li {float：left; line-height：38px;溢出：隐藏; padding：0;}。slide-tab a {background-color：＃eee0f2; border-bottom：1px solid #fff;颜色：＃e81; font-weight：500;显示：块; letter-spacing：0;概要：无; padding：0 20px;文字修饰：无; -webkit-transition：全部0.2s缓和; -moz-transition：全部0.2s缓进;转型：全部0.2s缓出; border-bottom：2px solid＃00897B;}。current a {color：#efe;背景：＃00897B;}。隐藏一个{/ *你可以直接隐藏它们，但我不认为这就是你想要的。 * / / *或者你可以将它们从应该得到所需效果的DOM中取代* / display：none; / ** /}

< html ng-app = ionicApp > < HEAD> < meta charset =utf-8> < meta name =viewportcontent =initial-scale = 1，maximum-scale = 1，user-scalable = no，width = device-width> < title>离子幻灯片标签< / title> < link href =// code.ionicframework.com/nightly/css/ionic.css =stylesheet> < script src =// code.ionicframework.com/nightly/js/ionic.bundle.js\"> ;</script> < /头> < body ng-controller =MyCtrl> <离子含量> < 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 =slideIndexclass =padding> <离子滑动> < h3>标签1< / h3> < p>页1< / p> < /离子滑动> <离子滑动> < h3>标签2< / h3> < p>第2页< / p> < /离子滑动> <离子滑动> < h3>标签3< / h3> < p>第3页< / p> < /离子滑动> <离子滑动> < h3>标签4< / h3> < p>第4页< / p> < /离子滑动> <离子滑动> < h3>标签5< / h3> < p>第5页< / p> < /离子滑动> <离子滑动> < h3>标签6< / h3> < p>第6页< / p> < /离子滑动> <离子滑动> < h3>标签7< / h3> < p>第7页< / p> < /离子滑动> < /离子滑动框> < /离子含量> < / body>< / html>

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>

解决方案

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>

这篇关于如何确保幻灯片选项卡在html中显示3个选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！