微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

无法使用slideNext和slideTo在ionic5应用程序中手动更改幻灯片

如何解决无法使用slideNext和slideTo在ionic5应用程序中手动更改幻灯片

我构建了ionic5应用程序,该应用程序利用循环添加离子幻灯片,其内容是不同的无线电组,其内容是从数组中提取的。我的问题是,当我尝试使用slideNext或slideto切换幻灯片时,它无法工作。我只能在刷新浏览器后才能使用它,而在构建android应用程序并进行测试时根本无法使用。

我正在尝试的代码是:

  <ion-slides #quizSlider>
      <ion-slide *ngFor="let question of questions;let i = index">
            <ion-list lines="none">   
                    <ion-radio-group [(ngModel)]="singleanswer">
                      <ion-item *ngFor="let answer of question.answers">
                          <ion-label>{{answer}}</ion-label>
                          <ion-radio slot="start" value="{{answer}}">
                          </ion-radio>
                      </ion-item>
                    </ion-radio-group>                              
                <div fxLayout="row" fxLayoutAlign="center" >
                    <ion-button color="primary" (click)="checkUserAnswers(i)">Check</ion-button>
                </div> 
            </ion-list>             
      </ion-slide>    
  </ion-slides> 

.ts代码

  import { IonSlides } from '@ionic/angular';
  
  @ViewChild('quizSlider') quizSlider: IonSlides;
  
  
  export class Quiz {
  
  questions: Question[];
  
  constructor() {}
  
      checkUserAnswers(questionNo)
      {
            if(this.questions.length == questionNo + 1)
            {
                this.router.navigate(['complete']);
            }
            else
            {
                console.log('test');
                //this.quizSlider.slideNext();
                //this.quizSlider.lockSwipes(false);

                this.quizSlider.slideNext();

                //this.quizSlider.lockSwipes(true);
                //let currentIndex = this.quizSlider.getActiveIndex().then( (val) => console.log(val) );
                //console.log('Current Slide: ' + currentIndex);
                //this.quizSlider.slideto(questionNo + 1);
            }                   
      }
  
  }

不确定是否与其相关,但是我使用的离子环境是:

  Ionic CLI                     : 6.11.8 
  Ionic Framework               : @ionic/angular 5.0.5
  @angular-devkit/build-angular : 0.900.7
  @angular-devkit/schematics    : 9.0.7
  @angular/cli                  : 9.0.7
  @ionic/angular-toolkit        : 2.2.0

更新 我尝试使用滑动,但我意识到(就像使用按钮事件的情况一样)幻灯片更改仅在刷新页面后才有效。我曾尝试降级为ionic4,但问题仍然存在

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?