html - ionic 4 Angular : Is it possible to have a fixed element in content while using infinite refresher?

Question

考虑一个简单的 Ionic 页面的内容:

<ion-content>

    <ion-refresher slot="fixed">...</ion-refresher>

    <div *ngFor="let item of items">
        ...
    </div>

    <ion-infinite-scroll>...</ion-infinite-scroll>

</ion-content>

我做了一个 Stackblitz 来演示这个页面:https://stackblitz.com/edit/ionic-v4-angular-tabs-nbjk4k

现在我想添加一些固定位置的东西——比方说<div>Some content</div> – 在不在 ion-header 范围内的页面顶部或底部或 ion-footer部分。是否可以修复 div坚持顶部还是底部？

我在 Ionic 文档和 Github 上找到的官方建议是使用 slot="fixed"在我想在内容区域中修复的任何元素上。

它对我不起作用，可能与 slot="fixed" 有冲突刷新组件。

如何实现固定元素？

Answer 1

确实 slot="fixed" 有问题,Ionic 团队为此做了一些改变。

content(div?) 需要用 position:relative wrapper 包裹起来。
使用 position:relative在标签中，它应该做的事情。例如 - <div slot='fixed' style="position:relative">Some content</div> .

Follow this PR了解更多信息。希望这有帮助!!