Question

我有以下代码段。在移动屏幕较小的情况下，它无法一次显示所有7个标签。因此，它将显示为两行标签，这些标签不够整洁。

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

我目前的代码在

之下

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: #eff0f2;
    border-bottom: 1px solid #fff;
    color: #888;
    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: #fff;
    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>

我想知道如何使用最少的代码更改使屏幕上的3个标签可滚动。

Answer 1

你可以尝试这种方式..

https://codepen.io/mastersmind/pen/QNqzbL

<ion-scroll class='myScroll' dir='ltr' zooming='true' direction='x' style='width: 100%; height: 50px'></ion-scroll>

这有助于您使用标签滚动方向x ..

离子1：可滚动标签（多个标签）和手柄溢出

1 个答案: