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 條評論)
    暫無評論

    返回頂部

    主站蜘蛛池模板: 2022年亚洲午夜一区二区福利 | 无码人妻精品一区二区三区99性 | 国产三级一区二区三区| 亚洲国产精品一区二区第四页| 亚洲一区二区三区无码国产| 国产一区美女视频| 午夜在线视频一区二区三区| 精品一区二区三区自拍图片区| 黑人大战亚洲人精品一区| 一区二区三区无码高清视频| 国产福利一区二区精品秒拍| 精品人妻无码一区二区色欲产成人| 亚洲精品一区二区三区四区乱码| 中文字幕精品亚洲无线码一区| 中文字幕一区在线| 成人免费av一区二区三区| 一区二区三区视频网站| 国产一区二区三区在线电影| 国产激情一区二区三区在线观看| 加勒比无码一区二区三区| 另类ts人妖一区二区三区| 国产麻豆媒一区一区二区三区| 日韩精品免费一区二区三区| 国产在线观看一区二区三区| 国产一区二区精品久久岳√ | 99久久人妻精品免费一区| 亚洲无线码一区二区三区| 国产成人无码精品一区二区三区| 高清一区二区三区日本久| 精品一区二区三区波多野结衣| 老熟妇仑乱一区二区视頻| 一区二区三区视频| 国产人妖视频一区二区破除| 区三区激情福利综合中文字幕在线一区亚洲视频1 | 无码av人妻一区二区三区四区| 国产日本亚洲一区二区三区| 狠狠做深爱婷婷久久综合一区 | 国产精品揄拍一区二区久久| 精品国产日韩亚洲一区在线| 亚洲国产精品成人一区| 久久久精品人妻一区二区三区 |