Question

我有一个离子应用程序，我需要动态创建一个离子滑块。每个离子载玻片最多只能有5个项目。接下来的5个项目将添加到下一个离子幻灯片中。实现这一点我有点困惑。我认为它可以通过CSS完成，但我并不擅长。当我的数组只包含5个项目时，它工作正常。如果它包含10，那么所有的都是嘎吱嘎吱的。

以下是我的尝试：

HTML：

    <!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
  <script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app='todo'>

  <ion-pane>
    <ion-content ng-controller="MyCtrl">
      <div class="button-bar" style="border: 2px solid #00aec9;">
        <ion-slide-box show-pager="false" does-continue="true" ng-repeat="mod in modules">
          <ion-slide>
            <div ng-repeat="item in mod.details" class="footer-bar" align="center">
              {{item.name}}
            </div>
          </ion-slide>
        </ion-slide-box>
      </div>
    </ion-content>
  </ion-pane>

</body>

</html>

JS

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

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

  $scope.modules = [{
    details: [{
      name: "name 1"

    }, {
      name: "name 2"
    }, {
      name: "name 3"
    }, {
      name: "name 4"
    }, {
      name: "name 5"
    }]
  }, {
    details: [{
      name: "1.1"

    }, {
      name: "2.2"
    }, {
      name: "3.3"
    }, {
      name: "4.4"
    }, {
      name: "5.5"
    }]
  }];
});

CSS

.slider-slide
{
    width:300px;
    border: 1px solid red;
}

Plunker

http://plnkr.co/TILgeHZ4hkHHghn8GvbB

Answer 1

尝试style =＆＃34; float：left＆＃34;

<ion-content ng-controller="MyCtrl">
    <div class="button-bar" style="border: 2px solid #00aec9;">
        <ion-slide-box show-pager="false" does-continue="true">
            <ion-slide ng-repeat="mod in modules" style="float:left">
                <div ng-repeat="item in mod.details" class="footer-bar" align="center">
                    {{item.name}}
                </div>
            </ion-slide>
        </ion-slide-box>
    </div>
</ion-content>

动态滑动板宽度css问题

1 个答案: