Question

我正在制作Ionic 3问卷调查应用程序，在幻灯片上回答问题之前，用户无法从一张幻灯片转到另一张幻灯片。我得到了一切正常工作，除了寻呼机（这个点）允许用户从一张幻灯片转到另一张幻灯片，即使问题＃2没有被回答。

我添加了以下逻辑，但它没有按预期工作。它仍然允许我从幻灯片0跳到幻灯片2.添加this.slideTo(this.currentIndex)更改了要为幻灯片0突出显示的点，但它显示了幻灯片2的内容。

onSlideWillChange(event) {
    let answerNotSelected: boolean = false;
    for (let i: number = 0; i < this.slides.getActiveIndex(); i++) {
      answerNotSelected = this.questionnaire.questions[i].selectedAnswer === undefined;
      if (answerNotSelected) { 
        console.log('Returning from newQuestionIndex ' + this.slides.getActiveIndex() +  ' to current slide:' + this.currentQuestionIndex);
        this.slideTo(this.currentQuestionIndex);
      }
    }  }

Answer 1

您可以锁定幻灯片，只有在问题有答案时才能启用。这样，寻呼机就不会改变当前的幻灯片（只是在那里给用户一些关于调查问卷中有多少其他问题的反馈）：

import { Component, ViewChild } from '@angular/core';
import { NavController, Content, Slides } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'app/home.page.html'
})
export class HomePage {
  @ViewChild(Slides) slides: Slides;

  ngOnInit() {
    this.slides.lockSwipes(true); // Lock the slides
  }

  public showPrevious(): void {
    this.slides.lockSwipes(false); // Unlock the slides
    this.slides.slidePrev(500);    // Move the the previous
    this.slides.lockSwipes(true);  // Lock the slides again
  }

  public showNext(): void {
    this.slides.lockSwipes(false); // Unlock the slides
    this.slides.slideNext(500);    // Move the the next
    this.slides.lockSwipes(true);  // Lock the slides again
  }
}

请参阅此 working plunker 进行演示。

Answer 2

我遇到了同样的问题-对于以后的任何人，我都以某种有点怪异的方式解决了它（因为_paginationContainer是内部变量）。您可能也可以很容易地在DOM中找到元素。

我在

上称呼它

ionSlideWillChange

，但可能会在任何滑动事件中调用它。

ion-slide的文档记录很少，但是它基于http://idangero.us/swiper/api/，并且具有所有相同的方法，因此您可以在此处查找更好的文档。

lockAll() {
    var current = this.slider.getActiveIndex();
    let array = this.slider._paginationContainer.childNodes
    for (let index = 0; index < array.length; index++) {
      var button : any = array[index];
      if (this.inRange(index, current -1, current +1)) {
        button.disabled = false;
      }
      else {
        button.disabled = true
      }
    }
}

inRange(x, min, max) {
    return ((x-min)*(x-max) <= 0);
}

离子3 - 如果没有应答幻灯片1，如何防止用户从幻灯片0到幻灯片2单击幻灯片寻呼机

2 个答案: