Ionic 2 Slides LOCK

Question

我想锁定滑动功能（通过滑动屏幕）它应该只在我点击按钮时有效。

因为我对打字稿很新，所以无法解释我应该如何使用它。我在ionic page上找到了一些文档。

“lockSwipes（shouldLockSwipes）” 我认为这是我需要的代码，但我不知道如何将它包含在我的IonicApp中。

HTML

<ion-slide>
  <ion-item>
    <img src="img/question.png (click)="goToSlide1()">
  </ion-item>
</ion-slide>

<ion-slide>
  <ion-item>
    <img src="img/clue.png (click)="goToSlide2()">
  </ion-item>
</ion-slide>

<ion-slide>
  <ion-item>
    <img src="img/answer.png (click)="Finish()">
  </ion-item>
</ion-slide>

TS

        import {Component} from '@angular/core';
        import {NavController} from 'ionic-angular';
        import {Finish} from '../finish/finish';
        import { Slides } from 'ionic-angular';
        import { ViewChild } from '@angular/core';


        @Component({
            templateUrl: 'build/pages/slider/slider.html'
        })
        export class Slider {
            @ViewChild(Slides) slides: Slides;
            value = '';
            changeText(value: string) { this.value = value; }
            constructor(private navController: NavController) {

            goToSlide1() {
                this.slides.slideTo(1, 500);
            }
            goToSlide2() {
                this.slides.slideTo(2, 500);
            }
            goToFinish() {
                this.navController.setRoot(Finish);
            }
    }
}

我希望有人可以帮助我！感谢。

Answer 1

让我们从头开始。

首先，您的HTML应如下所示：

<ion-slides>
    <ion-slide>
    <ion-item>
        <img src="img/question.png (click)="goToSlide1()">
    </ion-item>
    </ion-slide>

    <ion-slide>
    <ion-item>
        <img src="img/clue.png (click)="goToSlide2()">
    </ion-item>
    </ion-slide>

    <ion-slide>
    <ion-item>
        <img src="img/answer.png (click)="Finish()">
    </ion-item>
    </ion-slide>
</ion-slides>

然后在您的TS文件中，您应该使用ngAfterViewInit挂钩，因为ViewChild组件将在此处准备好，而不是之前。

所以你的TS应该是这样的：

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {Finish} from '../finish/finish';
import { Slides } from 'ionic-angular';
import { ViewChild } from '@angular/core';


@Component({
    templateUrl: 'build/pages/slider/slider.html'
})
export class Slider {
    @ViewChild(Slides) slides: Slides;
    value = '';
    changeText(value: string) { this.value = value; }

    constructor(private navController: NavController) {
    }

    ngAfterViewInit() {
        // child is set
        this.slides.lockSwipes(true);
    }

    goToSlide1() {
        this.slides.slideTo(1, 500);
    }

    goToSlide2() {
        this.slides.slideTo(2, 500);
    }

    goToFinish() {
        this.navController.setRoot(Finish);
    }    
}

检查angular 2 hooks

这将完成工作，快乐编码。

Answer 2

我正在使用Ionic版本3，我做了类似这样的事情

在HTML中

<ion-slides #mySlider> 
  <ion-slide class="swiper-no-swiping">Content 1 </ion-slide>
  <ion-slide class="swiper-no-swiping">Content 2 </ion-slide>
</ion-slides>

IN TS文件

@ViewChild('mySlider') mySlider: Slides;

ionViewDidLoad() {
  this.mySlider.lockSwipes(true);
}

请注意：在html中需要添加＆＃34; swiper-no-swiping＆＃34;对于每张幻灯片，这将禁用交换

Answer 3

将其添加到ionViewDidLoad函数

中

extension WordOrNumber: Hashable {
    var hashValue: Int {
        switch self {
        case .Word(let value):
            return value.hashValue
        case .Number(let value):
            return value.hashValue
        }
    }

    static func ==(lhs: WordOrNumber, rhs: WordOrNumber) -> Bool {
        switch (lhs, rhs) {
        case (.Word(let lhsValue), .Word(let rhsValue)):
            return lhsValue == rhsValue
        case (.Number(let lhsValue), .Number(let rhsValue)):
            return lhsValue == rhsValue
        default:
            return false
        }
    }
}