使用带有离子刷新器的离子载玻片 -Ionic-答案

【问题标题】：Using ion-slides with ion-refresher -Ionic-使用带有离子刷新器的离子载玻片 -Ionic-
【发布时间】：2017-08-25 10:49:44
【问题描述】：

在我的页面中添加 ion-refresher 组件后，我需要使用 ion-slides 组件制作 3 张幻灯片离子刷新器总是在页面的任何位置（中间、底部）向上拉时触发，而不仅仅是在页面顶部。

谁能帮我让离子刷新器只在页面顶部触发

这是我的代码

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

这个问题有解决办法吗？

【问题讨论】：

这个问题没有解决办法吗？
已经有解决方案了吗？

标签： ionic3

【解决方案1】：

使用 enabled 标签来启用和禁用离子刷新器。

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

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

在您的 HTML 中，您需要使用 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;
         }
    }

【讨论】：

【解决方案2】：

您必须对每张幻灯片进行复习：

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

【讨论】：

我遇到了同样的问题。你有什么解决办法吗？

【解决方案3】：

您必须根据 ion-slide scrollTop 是否小于 10 来控制启用的离子刷新器。这样您将限制其启用状态，并且不会在离子内向上滚动时触发它-幻灯片或离子滚动和滚动位置将保留在每张幻灯片中。下面的代码示例 -

</ion-refresher-content>

 </ion-refresher>


<ion-slides>

    <ion-slide *ngFor="let slide of slides;let i = index;">
     <ion-scroll class="y-scroll-custom" scrollY="true" #myScroll>
     <!--put long text--> 
     </ion-scroll>
    </ion-slide>
  </ion-slides>

</ion-content>

在您相应的 *.ts 文件中 -

import { ViewChildren, QueryList } from '@angular/core';
import { Slides} from 'ionic-angular';




@ViewChild('mySlider') slider: Slides;
@ViewChildren('myScroll') components:QueryList<Scroll>;

isRefresherEnabled() {
    if (this.slider) {
        const activeSlideIdx = this.slider.getActiveIndex();
        if (this.components && this.components['_results']) {
            if (this.components['_results'][activeSlideIdx]) {
                if (this.components['_results'][activeSlideIdx]['_scrollContent']) {
                    if (this.components['_results'][activeSlideIdx]['_scrollContent'].nativeElement.scrollTop <= 10) {
                        return true;
                    }
                }
            }
        }
    }
    return false;
}

【讨论】：