微信驗證碼效果

2021-12-02 23:50:00

首先，需要一個驗證碼的界面：

wxml:

<view class="item">
        <input type="number" value=\'{{phone}}\' bindinput="bindKeyInput" data-filed="phone"  placeholder="手機号" name="phone" />
        <i class="iconfont icon-denglu"></i>
      </view>
      <view class="item code">
        <view class=\'pwd\'>
          <input type="number" placeholder="驗證碼" name="code" placeholder-class="placeholderClass" />
          <i class="iconfont icon-APPicon-"></i>
        </view>
        <view class=\'send {{!isclick?"active":""}}\' bindtap=\'sendTo\'>{{!isclick?value+\'秒後可以重新擷取\':\'發送\'}}</view>
      </view>
</view>

樣式比較簡陋就不貼出來了

JS檔案下定義

Page({
  data: {
    isclick:true,
    value:60,
    phone:"",
  },
  //事件處理函數
  bindKeyInput(e)
  {
    this.data.phone=e.detail.value;
  },
  sendTo(){
    var that=this;
    let timer=setInterval(function(){
      if(that.data.value>0)
      {
        var time=that.data.value-1;
        that.setData({
          value:time,
          isclick:false
        })
      }
      else{
        clearInterval(timer);
        that.setData({
          value:60,
          isclick:true
        })
      }
    },1000)
  }
})

利用isclick判斷發送框的樣式，計時器獲得倒計時，效果如下：

樣式方面就是這樣，如要實作驗證碼登入，就在sendto方法下先調用發送驗證碼的接口，傳入phone就可以了，然後在登入方法下驗證即可

發表于

2019-12-27 11:32

番外

閱讀(145)

評論(0)

編輯

舉報