Question

已将我的表单分为一个离子html页面上的div，一次要显示一个，导航直到提交任何帮助，我的表单是这样的，第一个应该默认显示，而其他div应该在单击时显示下一个

 <div id="formPart1">
   <ion-row>
        <label>select date</label>
        <ion-input type="date" ng-model="date"></ion-input>
        <button ion-button full  ng-click="showNext()">Next</button>
   </ion-row>
</div>
  <div id="formPart2">
  <ion-row>
        <label>select date</label>
        <ion-input type="name" ng-model="name"></ion-input>
   </ion-row>
 </div>

Answer 1

所以，首先，您必须编写这样的代码

<div id="formPart1">
   <ion-row>
    <ion-label>select date</label>
    <ion-input type="date" [(ngModel)]="date"></ion-input>
    <button ion-button full  (click)="showNext()">Next</button>
   </ion-row>
</div>

<div id="formPart2" [hidden]="!YOUR_VARIABLE">
  <ion-row>
    <ion-label>select date</label>
    <ion-input type="name" [(ngModel)]="name"></ion-input>
  </ion-row>
</div>

在show showNext()方法中，您必须将变量设为true，就像这样

showNext() {
    this.YOUR_GLOBAL_VARIABLE = true
}

希望这对您有帮助！

Answer 2

在这种情况下，我建议您使用离子载玻片。将表单元素分配给幻灯片。并锁定在页面加载时滑动，只有在“下一步”按钮单击时才能切换到下一张幻灯片。

执行此操作以锁定刷卡

ionViewDidLoad() {
    console.log('ionViewDidLoad ServicePage');
    this.slides.lockSwipes(true);
}

然后在“下一步”按钮上单击

goToSlide(slideNo) {   


    this.slides.lockSwipes(false);
    this.slides.slideTo(slideNo, 500);
    this.slides.lockSwipes(true);
  }

离子三显示一次一格

2 个答案: