离子刷新器背景色不会改变离子性

Question

我正在使用离子刷新器来刷新应用程序页面上的内容。但是，当我拉起离子刷新器时，背景并没有完全设置为所需的颜色。

这是我要应用于离子刷新器的CSS类：

ion-refresher {
  background-color: #dedede;
}

ion-refresher-content {
  background-color: #dedede;
}

结果就是这样：

如何消除离子清新剂和主要成分之间的白色缝隙？

Answer 1

上拉时，创建了一个名为fixed-content的div

要消除差距，只需在.fixed-content中添加.scss 示例：

 .fixed-content{
    background:#dedede;
 }

Answer 2

这就是它为我工作的原因。

ion-refresher-content {
  padding-bottom: 100px;
  background-color: #dedede;
}

Answer 3

在 Ionic 4 上，此CSS对我有用：

ion-refresher-content {
  padding-bottom: 200px;
  background-color: yellow;

  .refresher-pulling {
    position: fixed;
    top: 50px;
  }
}

padding-bottom: 200px;填充了显示黄色的空间，但同时也引入了一个新问题。刷新箭头消失！为了使箭头保持在适当的位置并使其正常运行，添加了.refresher-pulling及其相应的样式。这样，现在应用程序的背景色将显示出来，没有任何白色间隙，并且微调框也保持在原位。

希望这对某人有帮助。

Answer 4

@devner的解决方案无法在iPhone X和同类设备（即具有安全区域插入的设备）上正常使用。

正确的解决方案（离子4）：

ion-refresher-content {
  position: relative;
  padding-bottom: 200px;
  background-color: var(--base-background-color-body);

  .refresher-pulling, .refresher-refreshing {
    position: relative;
    top: 30px;
  }
}

附录：我认为最好的UX可以通过下一个HTML实现：

  <ion-refresher slot="fixed" pullFactor="0.5" (ionRefresh)="onPullToRefresh($event)">
    <ion-refresher-content
      pullingIcon="refresh"
      refreshingSpinner="crescent"
    ></ion-refresher-content>
  </ion-refresher>