uni-app實現獲取驗證碼倒計時功能

    本文實例為大家分享了uni-app實現獲取驗證碼倒計時的具體代碼,供大家參考,具體內容如下

    實現的效果

    頁面部分是一個三目運算,codeTime是倒計時的時間。愛掏網 - it200.com

    具體思路:

    三目運算,判斷codeTime的值,當為0的時候顯示文字“獲取驗證碼”,大于0的時候顯示驗證碼的倒計時。愛掏網 - it200.comcodeTime默認為0.

    這里有個問題就是,怎么阻止用戶在倒計時還沒結束的時候一直點擊,影響倒計時。愛掏網 - it200.com

    解決辦法是寫個判斷,當codeTime大于60的時候,彈窗提示用戶不能重復獲取驗證碼。愛掏網 - it200.com當倒計時運行完了之后要清除倒計時。愛掏網 - it200.com

    代碼:

    
     export default {
     data() {
     return {
      codeTime:0,
     }
     },
      methods: {
       getCheckNum(){
     if(this.codeTime>0){
      uni.showToast({
      title: '不能重復獲取',
      icon:"none"
      });
      return;
     }else{
      this.codeTime = 60
      let timer = setInterval(()=>{
      this.codeTime--;
      if(this.codeTime
    

    css樣式:

    .all{
     margin: 30rpx;
     border-bottom: 2rpx solid #EEEEEE;
     display: flex;
     flex-wrap: nowrap;
    }
    .left{
     margin-bottom: 30rpx;
     margin-right: 40rpx;
     width: 150rpx;
    }
    .three{
     background-color: white;
     width: 92%;
     border-radius: 10rpx;
     padding: 20rpx 0;
     margin: 20rpx auto;
     position: relative;
    }
    .btn{
     background-color: orange;
     font-size: 28rpx;
     width: 160rpx;
     height: 70rpx;
     line-height: 70rpx;
     margin-top: 40rpx;
     color: white;
     font-weight: 600;
    }
    .get{
     position: absolute;
     top: 40rpx;
     right: 30rpx;
     background-color: orange;
     height: 70rpx;
     line-height: 70rpx;
     color: white;
     border-radius: 10rpx;
     padding: 0 20rpx;
    }

    以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。愛掏網 - it200.com


    聲明:所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益,可聯系我們進行處理。
    發表評論
    更多 網友評論0 條評論)
    暫無評論

    返回頂部

    主站蜘蛛池模板: 一区二区三区人妻无码| 久久免费精品一区二区| 日本午夜精品一区二区三区电影| 精品无码国产一区二区三区51安| 一区二区三区精品高清视频免费在线播放 | 国产伦精品一区二区三区免费下载| 一区二区中文字幕在线观看| 视频在线观看一区二区三区| 人妻AV一区二区三区精品| 国产伦精品一区二区三区视频猫咪 | 人妻久久久一区二区三区| 伊人色综合一区二区三区| 日本一区二区三区在线视频观看免费 | 国产一区二区三区国产精品| 日本无码一区二区三区白峰美| 日韩在线一区二区三区视频| 一区二区国产在线观看| 一区二区高清在线观看| 中文字幕一区日韩精品| 一区二区三区波多野结衣| 亚洲精品伦理熟女国产一区二区| 一区二区三区福利| 国产成人精品无码一区二区老年人 | 国模吧一区二区三区精品视频| 亚洲毛片αv无线播放一区| 色综合视频一区二区三区| 国产精品美女一区二区三区 | 国产品无码一区二区三区在线| 97久久精品一区二区三区| 亚洲乱码日产一区三区| 亚欧色一区W666天堂| 亚洲AV乱码一区二区三区林ゆな| 国产午夜福利精品一区二区三区| 国产A∨国片精品一区二区| 区三区激情福利综合中文字幕在线一区亚洲视频1 | 一区二区三区免费精品视频| 欧美成人aaa片一区国产精品| 无码8090精品久久一区| 国产aⅴ精品一区二区三区久久 | 少妇特黄A一区二区三区| 日韩精品乱码AV一区二区|