离子列表固定高度手风琴

ionic list fixed height accordion

本文关键字：高度 手风琴 列表      更新时间：2023-09-26

我有一个离子列表手风琴，我想是固定高度。这意味着我不希望整个手风琴只滚动内部列表，以便手风琴的标题在任何时候都是可见的。

所以它应该像jQuery手风琴一样工作

下面是我的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来做演示。

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

编辑你的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

相关文章：