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

时间:2019-03-21 16:41:05

标签: ionic-framework ionic4

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

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

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

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

结果就是这样:

enter image description here

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

4 个答案:

答案 0 :(得分:1)

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

enter image description here

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

 .fixed-content{
    background:#dedede;
 }

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

Ionic 4 上,此CSS对我有用:

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

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

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

希望这对某人有帮助。

答案 3 :(得分:0)

@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>