Ionic Pull to Refresh (Refresher) Bên trong một phần tử

Question

Có thể triển khai Ionic's pull to refresh (aka "Refresher") bên trong một phần tử thay vì trên toàn bộ trang không?

Điều này sẽ hữu ích khi thiết kế ứng dụng có phần có thể cuộn nhỏ hơn trong một trang. Với hành vi hiện tại, toàn bộ trang được kéo xuống thay vì chỉ là phần tử có thể cuộn.

Answer 1

Bạn đã cố gắng để encapsule ion-nội dung bên trong phần của bạn và đặt refresher bên trong?

Answer 2

Bạn có ý nghĩa như thế này không?

<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

Thực ra bạn có thể làm điều này, nhưng giải pháp này là giải pháp thực sự tốt hơn. Các thành phần ion-refresher chỉ có thể được sử dụng trong ion-content.

Vì vậy, bạn có thể đặt một ion-content khác trong trang của mình.

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

Bạn cần phải đặt mỗi ion-refresher vào một mới ion-content, bởi vì các thành phần ion-refresher sẽ được đưa vào cuối của scroll-content container, mà được tạo ra trong ion-content.

Chỉ cần lưu ý, rằng bạn sẽ không thể để sử dụng đầy đủ trang ion-refresher với một trong trang ion-refresher, bởi vì cả hai sẽ được thực hiện, khi bạn cố gắng để kéo trong trang ion-refresher:

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

    <!-- Your other content --> 

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

Answer 4

Bạn có thể thực hiện bằng cách sử dụng cuộn ion. Mã mẫu được cung cấp bên dưới:

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

Ngoài ra, hãy kiểm tra hình ảnh, chỉ phần nội dung màu xanh sẽ được lọc lại bằng ion. Phần khác sẽ được bên ngoài bồi dưỡng.