एक तत्व के अंदर ताज़ा करने के लिए आयनिक पुल (रीफ्रेशर)

Question

क्या पूरे पृष्ठ की बजाय किसी तत्व के अंदर Ionic's pull to refresh (aka "Refresher") लागू करना संभव है?

यह तब उपयोगी होगा जब किसी ऐप को डिज़ाइन किया जा सके जिसमें एक पृष्ठ के भीतर एक छोटा स्क्रोल करने योग्य अनुभाग हो। वर्तमान व्यवहार के साथ, संपूर्ण पृष्ठ केवल स्क्रॉल करने योग्य तत्व की बजाय खींचा जाता है।

Answer 1

क्या आपने अपने अनुभाग के अंदर आयन-सामग्री encapsule करने और रीफ्रेशर को अंदर रखने की कोशिश की है?

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 घटक scroll-content कंटेनर के अंत में रखा जाएगा एक नया ion-content में हर ion-refresher लगाने की जरूरत है, कि 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> 

कृपया छवि की जांच करें, केवल नीली सामग्री का हिस्सा आयन-रीफ्रेशर के अधीन होगा। अन्य अनुभाग रीफ्रेशर के बाहर होगा।