Angular 离子2滑锁

我想锁定滑动功能（通过滑动屏幕），它应该只在我单击按钮时工作

因为我对打字脚本还很陌生，所以我无法解释我应该如何让它工作。我在网上找到了一些文件

“刷锁（shouldLockSwipes）” 我认为这是我需要的代码，但我不知道如何将其包含到Ionicap中

HTML

---

我希望有人能帮助我！谢谢。

让我们从头开始

首先，您的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>

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

检查

---

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

将其添加到ionViewDidLoad函数中

---

我使用的是离子版本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>

---

请注意：在html中，需要为每张幻灯片添加“刷卡器禁止刷卡”，如果我使用ngAfterViewInit（）{this.slides.lockSwipes（true）；}Visual Studio给我一个错误->属性lockSwipes在类型幻灯片上不存在。这可能是因为Visual Studio没有最新版本的ionic，尝试使用

（this.slides）.锁滑动（true）

如果在运行时有效，那么您在Visual Studio中与VS.works now的类型有问题，但现在我得到一个错误-TypeError:this.slides.lockSwipes不是一个函数，你知道吗？我会在文档中查找，如果我找到了，我会发布解决方案。您的软件包中有最新的Ionic版本吗？这似乎就是问题所在。我使用的是离子版2.2.3，因为新版本正在破坏我的应用程序。我将尝试更新，但是否也可以用该版本锁定刷卡？

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

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

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

@ViewChild('mySlider') mySlider: Slides;

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