angular7 - ionic 4 pull 在拉动时刷新显示内容的文本

Question

嗨使用 ionic 4 / angular7

我想实现拉刷新，我是这样做的：

  <ion-refresher slot="start"
             (ionRefresh)="ionRefresh($event)"
             (ionPull)="ionPull($event)"
             (ionStart)="ionStart($event)">
<ion-refresher-content
        pullingIcon="arrow-dropdown"
        pullingText="Pull to refresh"
        refreshingSpinner="circles"
        refreshingText="Refreshing...">
</ion-refresher-content>

并在控制器中

 ionRefresh(event) {
    console.log('Pull Event Triggered!');
    setTimeout(() => {
      console.log('Async operation has ended');

  //complete()  signify that the refreshing has completed and to close 
  the refresher
      event.target.complete();
    }, 2000);
  }
  ionPull(event){
    //Emitted while the user is pulling down the content and exposing the 
  refresher.
    console.log('ionPull Event Triggered!');
  }
  ionStart(event){
    //Emitted when the user begins to start pulling down.
    console.log('ionStart Event Triggered!');
  }

这行得通，但它显示出一些奇怪的效果。在下拉文本拉刷新时，当关闭刷新器时，文本刷新也会在内容上悬停一秒或两秒。这一切都让它看起来很糟糕。我怎样才能解决这个问题？

我还必须为复习者添加样式，否则复习者的背景是黑色的，没有显示任何文字，所以我添加了这个：

<style>
  ion-content {
    background-color: #efefef;
    color:#555;
  }
  ion-refresher {
    z-index:1;
  }

我制作了一个显示行为的 gif

Answer 1

我修复了它（感谢 Paresh）是因为内容的背景是透明的。还必须将 z-index 设置为高于刷新器。由于某种原因，复习器上没有 z-index 没有显示文本

这是修复：

<ion-content style="background:#efefef;color:#555;z-index:1;">

  <ion-refresher slot="fixed" style=""
                 (ionRefresh)="ionRefresh($event)"
                 (ionPull)="ionPull($event)"
                 (ionStart)="ionStart($event)">
    <ion-refresher-content style=""
            pullingIcon="arrow-dropdown"
            pullingText="Pull to refresh"
            refreshingSpinner="circles"
            refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>


  <div class="ion-padding" style="background:#fff;z-index:2">
    content here
  </div>