離子拉到刷新（刷新）在一個元素內

Question

是否有可能實現Ionic's pull to refresh (aka "Refresher")內部元素而不是整個頁面上？

當設計一個頁面內具有較小可滾動部分的應用程序時，這會很有用。通過當前的行爲，整個頁面被拉下來，而不僅僅是可滾動的元素。

Answer 1

您是否試圖將離子含量填入您的部分並將其放入內部？

Answer 2

你的意思是這樣的嗎？

<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

其實你可以做到這一點，但它是一個更好的解決方案，而不是一個非常好的解決方案。 ion-refresher組件只能在ion-content中使用。

所以你可以把另一個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> 

你需要每ion-refresher投入新ion-content，因爲ion-refresher組件將在scroll-content容器的末尾說，就是在ion-content產生。

只需要注意，，你將無法在ion-refresher頁用一整頁ion-refresher用，因爲兩者都將被執行，當您試圖拉在ion-refresher頁：

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

    <!-- Your other content --> 

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

Answer 4

你可以通過使用離子滾動來完成。下面給出的示例代碼：

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

也請檢查圖像，只有藍色內容部分將承受離子進修。其他部分將在複習之外。