Ionic 2 固定定位的 div 里面的 ion-content答案

【问题标题】：Ionic 2 fixed positioned div inside ion-contentIonic 2 固定定位的 div 里面的 ion-content
【发布时间】：2017-11-29 03:11:05
【问题描述】：

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

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

该组件在多个页面中使用，因此当它被渲染时，页脚最终位于 ion-content 元素中。

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

当在浏览器和安卓设备上显示时，页脚的行为符合预期（固定在底部），但在 iOS 设备上显示时，页脚的行为方式很奇怪（它会随着 ion-content 的内容滚动和然后回到它的固定位置）。

我知道如果移出ion-content，页脚将正常运行，但正如我解释的那样，这是在多个页面中使用的组件内部，ion-content 随页面而不是组件一起提供。

有没有办法在不将页脚移出离子内容的情况下完成这项工作？

【问题讨论】：

标签： javascript css ionic-framework ionic2

【解决方案1】：

这个问题似乎没有直接的解决方案。

所以我选择了一个中间解决方案，我将对其进行解释以供其他人参考。

我不喜欢在每个页面中复制页脚代码的想法，所以我将组件分成两部分，一个用于列表，一个用于页脚。

我还添加了一个视图模型类来粘合这两个组件。

最终的解决方案是这样的：

<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，因此当列表组件内的页脚数据发生变化时，页脚组件会自行更新。

【讨论】：