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设备上显示时，页脚的行为方式很奇怪（它会滚动{{1}的内容}然后回到它的固定位置。）

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

有没有办法让这个工作没有将页脚移出离子内容？

Answer 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，这样当页脚组件内的页脚数据发生更改时，页脚组件会自行更新。

离子2固定位于离子含量内的div

1 个答案: