web-dev-qa-db-ja.com

Ionicプルして要素内を更新（Refresher）

Ionicのpull to refresh（aka "Refresher"） をページ全体ではなく要素内に実装することは可能ですか？

これは、ページ内のスクロール可能なセクションが小さいアプリを設計するときに役立ちます。現在の動作では、スクロール可能な要素だけでなく、ページ全体がプルダウンされます。

angularionic-frameworkionic2ionic3ionic-native
14
Tyler

あなたはイオンスクロールを使用して行うことができます。以下のサンプルコード：

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

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

enter image description here

7
I. Ahmed

実際にこれを行うことができますが、それは本当に素晴らしいソリューションよりも回避策です。 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>
5
Stephan Strate

このような意味ですか？

<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>
3
Cold Cerberus

セクションでion-scroll内部ion-contentを試してみましたか？

3
Twen