要素の内部をリフレッシュする（リフレッシャー）

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で生成されscroll-contentコンテナの最後に置かれるので、新しいion-contentにすべてのion-refresherを配置する必要があります。

あなたがページ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> 

はまた、唯一の青色コンテンツ部分をイオンリフレッシャー下であろう画像を確認してください。他のセクションはリフレッシャーの外にあります。