想在彈窗確認(rèn)按鈕中增加倒計時功能，由于原先使用的是AlertControlle，無法在button下的text位置綁定實時參數(shù)，因此采用模態(tài)窗口重寫alert彈框效果。

預(yù)期效果

help.png

首先ionic g page xxxx生成新頁面，在app.module.ts聲明，在原始頁面調(diào)用：

openModal(){

    const myModal:Modal = this.modalCtrl.create(ModalpagePage, {data:controllStr}, {

     //創(chuàng)建模態(tài)頁面，并傳參

      cssClass: 'custom-modal'

      //cssClass設(shè)置彈窗的樣式

    });   

    myModal.present();

    myModal.onDidDismiss((newData)=>{

    //帶參的回調(diào)函數(shù)

    });

不想全屏?xí)r的樣式

.custom-modal {

    background-color: rgba(0, 0, 0, .5) !important;

    transition: opacity .25s ease-in-out;

    padding: 15vh 10vw

} 

模態(tài)頁面的ts

closeModal(){

//退出函數(shù)

  this.view.dismiss();

  }

  ionViewDidLoad(){

  //接收傳過來的參數(shù)

  this.control =this.navParams.get('data');

    this.verifyCode.disable = false;

  //彈窗的一瞬間就開始計時，倒計時結(jié)束才能點擊確定按鈕

    this.settime();

  }

  ToControl(){

      console.log("you can ");

      this.view.dismiss(this.control);

     //回調(diào)傳參

  }

  //倒計時

  settime() {

    if (this.verifyCode.countdown == 1) {

      //this.verifyCode.countdown = 10;

      this.verifyCode.verifyCodeTips = "確定";

      this.verifyCode.disable = true;

      return;

    } else {

      this.verifyCode.countdown--;

    }

    this.verifyCode.verifyCodeTips = "倒計時"+this.verifyCode.countdown+"秒";

    setTimeout(() => {

      this.verifyCode.verifyCodeTips = "倒計時"+this.verifyCode.countdown+"秒";

      this.settime();

    },

      1000);

  }

為控制按鈕倒計時時無法點擊，在<button>中增加 [disabled]="!verifyCode.disable"

最終效果

QQ圖片20180321111052.jpg