离子拉动(复习)元素内部

Question

是否有可能在元素内部而不是在整个页面上实现Ionic的拉动(也称为"Refresher")？

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

Answer 1

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

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

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

Answer 2

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

Answer 3

您是否尝试过在您的部分中的ion-content中进行ion-scroll并将复习内容放入其中？