Question

在我的页面中添加离子修复组件后，我需要使用离子滑块组件制作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>

是否有解决此问题的方法？

Answer 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;
         }
    }

Answer 2

每张幻灯片都需要复习一次：

corpus <- as_corpus_frame(docs)

Answer 3

您必须根据离子滑动式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;
}

使用具有离子清新剂的离子载片 - 离子 -

3 个答案: