離子2幻燈片LOCK

我想鎖定滑動功能（通過滑動屏幕），當我點擊按鈕，它應該只工作。離子2幻燈片LOCK

由於IM相當新的打字稿我無法解釋我應該怎麼得到這個工作。我在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>

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

我希望有人能幫助我！謝謝。

來源

2017-05-31 CupOfTea

讓我們從頭開始。

首先你的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

這將做的工作，快樂的編碼。

來源

2017-05-31 20:33:01

如果我使用 ngAfterViewInit（）{ this.slides.lockSwipes（真）; } Visual Studio給了我一個錯誤 - > 屬性lockSwipes在類型幻燈片上不存在。 – CupOfTea

這可能是因爲視覺工作室不會有最後的版本類型的離子，試着用'（ this.slides）.lockSwipes（真）'如果在運行時的工作你有一個VS.問題類型 –

現在在Visual Studio中工作，但現在我得到一個錯誤。 -TypeError：this.slides.lockSwipes不是一個函數任何想法？如果我找到一個解決方案，我會在文檔中查找解決方案。 – CupOfTea

添加到ionViewDidLoad功能這

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

來源

2018-02-09 22:20:56 AissaDevLab

我使用離子版本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); 
}

請不要TE：在HTML中需要添加「刷卡-NO-揮動」每張幻燈片這將禁用交換

來源

2018-02-20 10:00:10

離子2幻燈片LOCK

回答

相關問題