Ionic 2 幻灯片锁定
Ionic 2 Slides LOCK
我想锁定滑动功能(通过滑动屏幕)它应该只有在我点击按钮时才有效。
因为我对打字稿还很陌生,所以我无法解释我应该如何让它工作。我在 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);
}
}
}
希望有人能帮帮我!谢谢
让我们从头开始。
首先你的 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);
}
}
这就够了,编码愉快。
将其添加到 ionViewDidLoad 函数中
ionViewDidLoad() {
this.slides.lockSwipes(true);
}
我正在使用 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>
在 TS 文件中
@ViewChild('mySlider') mySlider: Slides;
ionViewDidLoad() {
this.mySlider.lockSwipes(true);
}
请注意:在 html 中需要为每张幻灯片添加 "swiper-no-swiping" 这将禁用交换
我想锁定滑动功能(通过滑动屏幕)它应该只有在我点击按钮时才有效。
因为我对打字稿还很陌生,所以我无法解释我应该如何让它工作。我在 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);
}
}
}
希望有人能帮帮我!谢谢
让我们从头开始。
首先你的 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);
}
}
这就够了,编码愉快。
将其添加到 ionViewDidLoad 函数中
ionViewDidLoad() { this.slides.lockSwipes(true); }
我正在使用 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>
在 TS 文件中
@ViewChild('mySlider') mySlider: Slides;
ionViewDidLoad() {
this.mySlider.lockSwipes(true);
}
请注意:在 html 中需要为每张幻灯片添加 "swiper-no-swiping" 这将禁用交换