ionic 4 pull, чтобы обновить текст, отображаемый поверх содержимого

Question

Привет, используя ионный 4 / angular7

Я хочу обновить Pull, и я сделал это следующим образом:

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

я сделал подарок, показывающий поведение

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>