Question

我创建了离子3移动应用程序，我添加了离子手风琴列表我尝试做的时候有人点击展开列表项目，改为背景颜色并想延迟导航到对方如1分钟，但是有人知道如何正确地做到这一点。背景颜色是改变但不延迟到页面导航

我将此用于页面延迟

this.navCtrl.push('AboutPage', null, {
      duration: 200,

    });

代码部分行

 <ion-row [navPush]="aboutPage" [style.background]="buttonColor" (click)="someAction()">
            <ion-col>
              <div><p class="rooms-dtl-nme" >Basic</p></div>
            </ion-col>
            <ion-col>
              <div><p class="rooms-dtl-nme">2 floar</p></div>
            </ion-col>
            <ion-col>
              <div><p class="room-dtl-price">$ 340.00 </p></div>
            </ion-col>
          </ion-row>

看my working sample

这是我的代码

.ts

aboutPage = AboutPage; private buttonColor: string = "primary";

someAction() {
    this.buttonColor = "light";
}
 data: Array<{title: string, details: string, icon: string, showDetails: boolean}> = [];

  constructor(public navCtrl: NavController, public navParams: NavParams) {

    for(let i = 0; i < 10; i++ ){
      this.data.push({
        title: 'Title '+i,
        details: '',
        icon: 'ios-arrow-down',
        showDetails: false
      });
    }
  }
  toggleDetails(data) {
    if (data.showDetails) {
      data.showDetails = false;
      data.icon = 'ios-arrow-down';
    } else {
      data.showDetails = true;
      data.icon = 'ios-arrow-up-outline';
    }
  }

HTML

<ion-list>

    <ion-item padding *ngFor="let d of data"  [ngStyle]="{'background':buttonColor}" (click)="someAction()" tappable>


<ion-grid class="book-item-list">

      <ion-row>
        <ion-col>
          <div><p class="rooms-nme">House <span class="room-num-spec">2</span></p></div>
        </ion-col>
        <ion-col>

        </ion-col>
        <ion-col>
          <div><p class="room-price">$ 250.00 </p></div>
        </ion-col>
      </ion-row>
  <ion-row>
    <ion-col>
      <div><p class="rooms-types">Sample</p></div>
    </ion-col>
    <ion-col>

    </ion-col>
    <ion-col>
      <div><p class="room-rate">Rate </p></div>
    </ion-col>
  </ion-row>
      </ion-grid>


      <ion-icon color="primary" item-right [name]="d.icon" (click)="toggleDetails(d)"></ion-icon>

      <div *ngIf="d.showDetails">
        <ion-grid class="book-item-list-dtl" >

          <ion-row [navPush]="aboutPage" [style.background]="buttonColor" (click)="someAction()">
            <ion-col>
              <div><p class="rooms-dtl-nme" >Basic</p></div>
            </ion-col>
            <ion-col>
              <div><p class="rooms-dtl-nme">2 floar</p></div>
            </ion-col>
            <ion-col>
              <div><p class="room-dtl-price">$ 340.00 </p></div>
            </ion-col>
          </ion-row>

        <ion-row>
            <ion-col>
              <div><p class="rooms-dtl-nme" >Basic</p></div>
            </ion-col>
            <ion-col>
              <div><p class="rooms-dtl-nme">2 floar</p></div>
            </ion-col>
            <ion-col>
              <div><p class="room-dtl-price">$ 340.00 </p></div>
            </ion-col>
          </ion-row>
        </ion-grid>



      </div>
    </ion-item>
  </ion-list>

CSS

.book-item-list-dtl .row { 
    border-bottom: 1px whitesmoke solid;}

Answer 1

首先将'AboutPage'更改为AboutPage（删除单引号）

如果要通过组件

处理，请删除[navPush]="aboutPage"

this.navCtrl.push(AboutPage, null , {
    duration: 2000,
});

<强> WORKING DEMO

持续时间：动画应采用的长度（以毫秒为单位）。

<强>延迟   ：您可以使用setTimeout

setTimeout(() => {
    this.navCtrl.push(AboutPage, {
        duration: 200, // The length in milliseconds the animation should take.
    });
},2000);

Ionic page push cant delay

1 个答案: