离子拉动（复习）元素内部

Posted 2021-03-30

是否可以在元素内部而不是在整个页面上实现Ionic's pull to refresh (aka "Refresher")？

在设计页面中具有较小可滚动部分的应用程序时，这将非常有用。使用当前行为，整个页面被拉下而不仅仅是可滚动元素。

答案

您可以使用离子滚动来完成。示例代码如下：

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

另外请检查图像，只有蓝色内容部分将在离子复习。其他部分将在复习之外。

另一答案

实际上你可以这样做，但它更像是一种解决方法，而不是一个非常好的解决方案。 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>

另一答案

你的意思是这样的吗？

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

另一答案

您是否尝试过在离心内容中离子滚动并将清新剂放入内部？