javascript - ionic 列表固定高度 Accordion

Question

我有一个 ionic 列表 Accordion ，我希望它具有固定的高度。这意味着我不希望整个 Accordion 只滚动内部列表，以便 Accordion 的标题始终可见。

所以它应该像 jQuery 一样工作 Accordion

这是我的 CSS 示例:

.list .item.item-accordion {
  line-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
  transition: 0.09s all linear;
}
.list .item.item-accordion.ng-hide {
  line-height: 0px;
}
.list .item.item-accordion.ng-hide-add,
.list .item.item-accordion.ng-hide-remove {
  display: block !important;
}

我做了一个codepen进行演示。

Answer 1

这有点管用。它需要一些调整，但希望能让您朝着正确的方向前进。

编辑您的 html 以将包装器添加到 ng-repeat。

  <div class="ion-checkbox-viewport">
    <ion-checkbox ng-repeat="filter in group.filters | orderBy: 'name'" class="item-accordion" value="{{filter.name}}" ng-model="filter.checked" ng-change="ModifyFilter(filter)" ng-show="isGroupShown(group)">
        {{filter.name}}
    </ion-checkbox>
  </div>

然后添加一个css规则:

.ion-checkbox-viewport {
  max-height: 200px;
  width:100%;
  display:block !important;
  overflow:scroll !important;
}

它所做的只是将 ng-repeat 包装在另一个父元素中，然后在该元素上设置最大高度并根据需要滚动。

http://codepen.io/anon/pen/LVxwxP