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

3 回答

• 0

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

  回复于 2024-04-18T18:22:08+08:00
• 0

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

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

  回复于 2024-04-18T18:22:08+08:00
• 0

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

  回复于 2024-04-18T18:22:08+08:00