Question

我在我的移动应用中使用了离子。我有一个包含员工列表的目录。它工作正常，但最后一个员工姓名被削减或不可见。我在离子滚动中使用集合重复。在此我过滤指令。 filter指令不应该是可滚动的。

我尝试设置底部：50px表示列表中的最后一项，它会显示最后一项，但会覆盖其上方的项目。

关于如何解决这个问题的任何建议都是打破

<ion-content scroll="false">
        <filters on-query-change="onQueryChange()" class="filter-directive"></filters>
        <hr class="hline">

        <ion-scroll class="scroll-length">
            <div 
                 collection-repeat="contact in contacts track by contact.id"
                 item-width="100%"
                 item-height="getHeight(contact)"
                 ng-show="(contact.fullName || contact.isDivider)>
                <div id="company-directory-item-divider"
                     class="item item-divider fw-semibold dark"
                     ng-if="contact.isDivider">
                     {{contact.letter}}
                </div>
                <div 
                     class="item item-icon-right tn-nav-item"
                     ng-click="gotoEmployeeInfo(contact)"
                     ng-if="contact.fullName">
                    <span ng-bind-html="contact.fullName"></span>
                    <div class="tn-nav-item-subtitle dark"> {{contact.workShortLocDesc}}</div>
                    <i class="icon ion-ios-arrow-forward"></i>
                </div>
            </div>
        <ion-scroll>
    </ion-content>

Answer 1

看起来带有集合重复的div应该是离子内容中的第一个元素，以便它起作用：

所以这就是我最终修复它的方式：

摆脱ion-scoll
使离子内容可滚动
将过滤器指令和 hline 放在ion-header和ion-content之间，并将其设置为绝对位置（以及一些边缘顶部样式）
使用margin-top设置离子含量以使其更低（以便不在过滤器上写入）这很有用。

集合 - 重复内部离子滚动正在切掉列表中的最后一项

1 个答案: