İyonik Bir Unsurun İçini Yenilemek için Çekme (Tazeleme)

Question

Tüm sayfanın bir yerine Ionic's pull to refresh (aka "Refresher") bir elemanın içine uygulanabilir mi?

Bu, bir sayfa içinde daha küçük bir kaydırılabilir bölüm içeren bir uygulama tasarlarken yararlı olur. Mevcut davranışla, sayfanın tamamı kaydırılabilir öğeden ziyade aşağı çekilir.

Answer 1

Bölümünüzün içinde iyon içerikli kapsülleme ve tazeleme içerisine koymaya çalıştınız mı?

Answer 2

Bunun gibi bir şey mi var?

<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

Aslında bunu yapabilirsiniz, ancak gerçekten güzel bir çözümden daha iyi bir çözümdür. ion-refresher bileşenleri yalnızca ion-content'da kullanılabilir.

Sayfanıza başka bir ion-content girebilirsiniz. ion-refresher bileşen scroll-content kabın sonunda konacaktır çünkü

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

Bunu ion-content oluşturulur, yeni ion-content içine her ion-refresher koymak gerekir.

sayfa ion-refresher çekmek çalıştığınızda alışkanlık, hem çalıştırılacaktır çünkü mümkün sayfa ion-refresher bir ile tam sayfa ion-refresher kullanmak için

Hemen not, :

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

    <!-- Your other content --> 

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

Answer 4

You iyon kaydırma kullanarak yapabilirsiniz. Aşağıdaki örnek kod verilmiştir:

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

Ayrıca, sadece mavi içeriği kısmı iyon tazeleme altında olacak görüntü kontrol edin. Diğer bölüm ise tazeleme dışında olacak.