造型离子清新剂

Question

我正在尝试在一个特定页面上设置离子刷新器组件背景的样式，因为它具有 header。 它的工作方式与 Safari 中的预期一样，但在设备上，它覆盖了顶部的所有内容。

我尝试了一些使用 z-index（也使用伪元素）+ 绝对定位的东西，但我无法让离子刷新器坐在它通常的位置。 一旦我向离子刷新器添加背景颜色，它就会覆盖在顶部。

关于如何设计这个元素的背景的任何想法？

我使用的 CSS。 请注意，当我添加背景颜色时，它只会覆盖所有内容。

ion-refresher:global(.ios) {
        height: 120px;

        ion-refresher-content {
            position: relative;
            padding-top: 18px;
            justify-content: start !important;

            &::after {
                content: '';
                display: block;
                width: 100%;
                height: 120px;
                position: absolute;
                top: 0;
                z-index: -9999;
                background-color: purple;
            }
        }

        :global(.refresher-pulling-icon) {
            color: white;
        }

        ion-spinner {
            color: white;
        }
    }

关于如何调试的任何建议？