离子2固定位置的离子内部div

Question

我有一个组件，该组件列出了一堆记录，并且具有固定在底部的页脚。

list-component footer {
     position: fixed;
     bottom: 10px;
}

此组件在几个页面中使用，因此，当它渲染时，页脚最终会进入离子元素内。

<my-page>
    <ion-content>
        <div class="scroll-content">
            <list-component>
                 <!-- component contents -->
                 <footer>
                    <!-- footer contents -->
                 </footer>
            </list-component>
        </div>
    </ion-content>
</my-page>

在浏览器上显示时，页脚的行为如预期的（固定在底部），也显示在Android设备上，但是当在iOS设备上显示，页脚以一种奇怪的方式行为（它用ion-content的内容滚动，然后获取返回其固定位置）。

我知道，如果搬出ion-content，则页脚会正常起作用，但是正如我所解释的那样，这是在几个页面中使用的组件中，并且ion-content随页面而不是组件随附。

。

有没有办法在不将页脚移出离子容器的情况下进行工作？

Answer 1

似乎对此问题没有直接的解决方案。

因此，我解决了一个中间解决方案，我将为他人的参考解释。

我不喜欢每个页面复制页脚代码的想法，因此我将组件分为两个，一个用于列表。

。

我还添加了一个View-Model类来粘合两个组件。

最终解决方案看起来像这样：

<my-page>
  <ion-content>
        <list-component [(footer)]="footer">
        </list-component>
  </ion-content>
  <footer-component [footer]="footer"></footer-component>
</my-page>

因此，页脚组件放在ion-content之外，因此固定位置不会在iOS上破裂。

还要注意，视图模型是双向绑定到list-component的双向绑定到footer-component的，因此当页脚数据在列表组件内更改时，页脚组件会自行更新。