Ionic Pull to Refresh (Refresher) Inside a Element

Question

Czy możliwe jest zaimplementowanie Ionic's pull to refresh (aka "Refresher") wewnątrz elementu zamiast na całej stronie?

Jest to przydatne przy projektowaniu aplikacji z mniejszą przewijalną sekcją na stronie. Przy obecnym zachowaniu cała strona jest rozkładana, a nie tylko przewijany element.

Answer 1

Czy próbowałeś zamknąć w sobie sekcję o zawartości jonów i umieścić odświeżacz w środku?

Answer 2

Masz na myśli coś takiego?

<div id='smaller-scrollable-section'> 

    <ion-content> 

     <ion-refresher (ionRefresh)="doRefresh($event)"> 
      <ion-refresher-content></ion-refresher-content> 
     </ion-refresher> 

     <ion-list> 
      <ion-item *ngFor="let item of collection"> 
      </ion-item> 
     </ion-list> 

     <ion-infinite-scroll (ionInfinite)="fetchMore($event)"> 
      <ion-infinite-scroll-content></ion-infinite-scroll-content> 
     </ion-infinite-scroll> 

    </ion-content> 

</div> 

Answer 3

W rzeczywistości można to zrobić, ale jest to raczej rozwiązanie zastępcze niż naprawdę dobre rozwiązanie. Komponenty mogą być używane tylko w .

Dzięki temu możesz umieścić na swojej stronie kolejny ion-content.

<ion-content padding> 
    <div> 
     <!-- Your other content --> 
    </div> 

    <!-- Additional ion-content --> 
    <ion-content> 
     <!-- Your inline ion-refresher --> 
     <ion-refresher></ion-refresher> 
    </ion-content> 
</ion-content> 

Musisz umieścić każdy ion-refresher do nowego ion-content, ponieważ składnik ion-refresher zostanie oddany pod koniec pojemnika scroll-content, który jest generowany w ion-content.

Tylko uwaga, że nie można mieć używać pełnej strony ion-refresher z in stronie ion-refresher, ponieważ oba będą wykonywane, gdy próbujesz ciągnąć w stronę ion-refresher:

<ion-content padding> 
    <ion-refresher></ion-refresher> 

    <!-- Your other content --> 

    <ion-content> 
     <ion-refresher></ion-refresher> 
    </ion-content> 
</ion-content> 

Answer 4

You można zrobić za pomocą przewijania jonów. Przykładowy kod jest podany poniżej:

<ion-content> 
    <div class="row"> 
     <p class="col-sm-12">This text will display on top</p> 
    </div> 

    <div class="row"> 
     <div class="col-sm-6"> 
      <ion-scroll> 
       <ion-refresher> 
       </ion-refresher> 
       <p class="col-sm-12">This text will be under ion-refresher pull refresh</p> 
      </ion-scroll> 
     </div> 
     <div class="col-sm-6"> 
      <p class="col-sm-12">This text will display on center right</p> 
     </div>  
    </div> 
    <div class="row"> 
     <p class="col-sm-12">This text will display on bottom</p> 
    </div> 
<ion-content> 

Proszę również sprawdzić obraz, tylko zawartość niebieska zostanie umieszczona pod odświeżaczem jonów. Inne sekcje znajdą się poza odświeżaczem.