ionic 4拉动以刷新在拉动时显示在内容上的文本

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!');
  }

这有效，但显示出一些奇怪的效果。当下拉文本时，拉动刷新会悬停在内容上，当关闭刷新器时，文本刷新会保持显示 1 秒或 2 秒。这一切都让它看起来很糟糕。我该如何解决这个问题？

我还必须向刷新器添加样式，否则刷新器的背景是黑色的，没有显示文本，所以我添加了这个：

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

ionic 4拉动以刷新在拉动时显示在内容上的文本

ionic 4 pull to refresh text showing over content while pulling

angular7

ionic4

refresher