ionic 4拉动可刷新拉动时显示超出内容的文本

Question

嗨，使用离子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!');
  }

这有效，但显示出一些奇怪的效果。当按下文本拉动以刷新鼠标悬停在内容上时，也关闭刷新器时，文本刷新将停留一秒钟或2秒钟。这一切都使它看起来很糟糕。我该如何解决？

我还必须向刷新器添加样式，否则刷新器的背景为黑色，没有显示任何文本，因此我添加了以下内容：

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

我制作了显示行为的gif

Answer 1

我修复它（感谢Paresh）是因为内容的背景是透明的。还必须将z索引设置为高于刷新。由于某种原因，刷新器上的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>