使用带有离子清新剂的离子载片 - 离子 - [英] Using ion-slides with ion-refresher -Ionic-

问题描述

我需要在我的页面中添加离子清新剂组件后使用离子滑片组件制作3张幻灯片
当拉出页面中的任何位置（中间，底部）时，离子刷新器总是会被触发页面顶部。

I need to make 3 slides using ion-slides component after adding ion-refresher component to my page the ion-refresher always fired when pulling up at any position in the page (middle,bottom) not only on top of the page.

有人可以帮我制作只在页面顶部触发的离子复习器

can someone help my to make ion-refresher only fired on top of the page

这是我的代码

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

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

is there a solution for this problem ?

推荐答案

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

You will have to control the ion-refresher being enabled based on if the ion-slide scrollTop is less than 10. This way you will be restricting its enabled state and it won't be triggered with scroll up inside the ion-slide or ion-scroll and scroll position will be retained in each slide. Code Sample below -

</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文件中 -

in your corresponding *.ts file -

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

这篇关于使用带有离子清新剂的离子载片 - 离子 - 的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！