离子刷新器背景颜色不会改变离子答案

【问题标题】：Ion Refresher Background color wont change ionic离子刷新器背景颜色不会改变离子
【发布时间】：2019-08-12 14:18:09
【问题描述】：

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

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

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

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

这就是结果的样子：

如何去除离子刷新器和主要内容之间的空白？

【问题讨论】：

标签： ionic-framework ionic4

【解决方案1】：

在 Ionic 4 上，这个 CSS 对我有用：

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

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

padding-bottom: 200px; 填充空间以显示黄色，但它也引入了一个新问题。刷新箭头消失了！为了使箭头保持原位并使其正常工作，添加了.refresher-pulling及其对应的样式。这样，现在应用背景颜色显示没有任何白色间隙，并且微调器保持在原位。

希望这对某人有所帮助。

【讨论】：

【解决方案2】：

当你拉起时，一个名为fixed-content的div被创建了

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

 .fixed-content{
    background:#dedede;
 }

【讨论】：

感谢您的建议，我设法通过将 padding-bottom 添加到 ion-refresher-content 来使其以另一种方式工作，这给了我想要的行为。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

@devner 的解决方案不适用于 iPhone X 和 kind（即带有安全区域插入的设备）。

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

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

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

附录：我认为最好的用户体验可以通过下一个 HTML 实现：

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

【讨论】：