2017-08-25 6 views
0

イオンリフレッシュコンポーネントを使用して3枚のスライドを作成する必要があります。 ページ内の任意の位置でイオン引き戻し剤が常に放出されます(中、下)だけでなく、ページの上に。イオンリフレッシャーでのイオンスライドの使用-Ion-

誰かが私をイオン復習をするために助けることができるだけで私のコード

<ion-content> 
    <ion-refresher (ionRefresh)="doRefresh($event);"> 
     <ion-refresher-content 
      pullingText="Pull to refresh" 
      pullingIcon="arrow-up" 
      refreshingSpinner="crescent"> 

    </ion-refresher-content> 

    </ion-refresher> 


    <ion-slides> 

     <ion-slide> 

     <!--put long text--> 
     </ion-slide> 

     <ion-slide> 

     </ion-slide> 

     <ion-slide> 


     </ion-slide> 

     </ion-slides> 

    </ion-content> 

は、この問題の解決策があるとされ、このページ

の上に解雇しましたか?

+0

この問題の解決策はありませんか? – Taha

答えて

0

有効タグを使用してイオンリフレッシャを有効または無効にします。あなたのHTMLで

<ion-refresher enabled={{pullToRefresh}} 
       (ionRefresh)="doRefresh($event);"> 
    <ion-refresher-content 
     pullingText="Pull to refresh" 
     pullingIcon="arrow-up" 
     refreshingSpinner="crescent"> 

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

以下に示すように、あなたはionSlideDidChangeイベントを使用してスライドのインデックスをチェックする必要があります。

  <ion-slides (ionSlideDidChange)="slideChanged()"> 

あなたのTSファイルでの現在のインデックスをチェックするslideChangedメソッドを実装以下のようにpullTorefreshフィールドを有効/無効にし、スライド上でgetActiveIndex()を使用するには、ViewChildコンポーネントをインポートし、スライドをViewChildとして宣言する必要があります。

import { Component, ViewChild, Input } from '@angular/core'; 

    export class Myclass { 
     @ViewChild(Slides) slides: Slides; 
     public pullToRefresh: boolean; 

     .... 
    slideChanged() { 
    let currentIndex = this.slides.getActiveIndex(); 
    this.pullToRefresh = (currentIndex == 0) ? true : false; 
     } 
    } 
0

あなたはスライドごとに復習持っている必要があります。

<ion-content> 
    <ion-slides> 
    <ion-slide> 
     <ion-content padding> 
     <ion-refresher (ionRefresh)="doRefresh($event)"> 
      <ion-refresher-content 
      pullingIcon="ios-refresh" 
      pullingText="Pull to refresh" 
      refreshingSpinner="ios" 
      refreshingText="Loading..."> 
      </ion-refresher-content> 
     </ion-refresher> 
     <!--put long text--> 
     </ion-content> 
    </ion-slide> 
    <ion-slide> 
     <ion-content padding> 
     <ion-refresher (ionRefresh)="doRefresh($event)"> 
      <ion-refresher-content 
      pullingIcon="ios-refresh" 
      pullingText="Pull to refresh" 
      refreshingSpinner="ios" 
      refreshingText="Loading..."> 
      </ion-refresher-content> 
     </ion-refresher> 
     <!--put long text--> 
     </ion-content> 
    </ion-slide> 
    <ion-slide> 
     <ion-content padding> 
     <ion-refresher (ionRefresh)="doRefresh($event)"> 
      <ion-refresher-content 
      pullingIcon="ios-refresh" 
      pullingText="Pull to refresh" 
      refreshingSpinner="ios" 
      refreshingText="Loading..."> 
      </ion-refresher-content> 
     </ion-refresher> 
     <!--put long text--> 
     </ion-content> 
    </ion-slide> 
    </ion-slides> 
</ion-content> 
関連する問題