wepy开发小程序 手机验证码 滑动登录

初次开发小程序 借鉴了网上的格式 加了点效果 成效图如下

dom如下:

    <view class="test-box">   
      <view class="input-box"> 
        <view class="input-h margin">
          <input class="col-2" type="number"
          placeholder-style="color:#9b9b9b;text-align:left"   
          placeholder="请输入手机号"
          value="{{phone}}"
          maxlength=11
          focus @input="getValue('phone')"/>
        </view>
      </view>
      
      <view class="input-box"> 
        <view class="input-h">   
          <input class="col-3" type="number" 
            placeholder-style="color:#9b9b9b;text-align:left"  
            placeholder="请输入短信验证码"
            value="{{msm}}"
            maxlength=6
            @input="getValue('msm')"
          />
          <view class="msgCode" @tap="sendMsg">{{btnText}}</view>  
        </view> 
      </view> 
    </view>    
    <view class="content" style="background-color:{{SendColor}}">
      <view class="content-c">
        <view class=" {{moveable?'sliderContent':'slider-done'}}">
          {{moveText}}
          <view class="slider" @touchstart="moveSendBtnStart" @touchend="moveSendBtnEnd" @touchmove="moveSendBtn" style="left:{{moveSendBtnLeft}}rpx;">
            <image class="slider-img" src="../assert/img/right.png"/>
          </view>  
        </view>  
      </view>
    </view>
    <button class="btn"     
    hover-stay-time="100"  
    style="background-color:{{btncolor}}"
    disabled="{{disabled}}"
    @tap="login"
    >登录</button> 

js如下:

    data = {
      phone: '',
      msm: '',
      btnText: '获取验证码',
      currentTime: 60,
      // btnState:true, //是否可以点击验证码
      moveStartX: 0, // 起始位置
      moveSendBtnLeft: 0, // 发送按钮的left属性
      moveEndX: 0, // 结束位置
      moveText: '按住滑块,拖动到最右边',
      screenWidth: 0, // 屏幕宽度
      moveable: true, // 是否可滑动
      disabled: true, // 登录按钮是否可用,
      SendColor: '#9b9b9b', // 滑块背景颜色
      btncolor: '#ddd', // 登录按钮的背景颜色
      timer:null //60秒定时器
    }


 onLoad() { // 获取宽度
      wepy.getSystemInfo().then(res=>{
        this.screenWidth = res.screenWidth
      })
    } 

函数处理

methods = {
      // 开始移动
      moveSendBtnStart(e) {
        if (!this.moveable) {
          return
        }
        this.moveStartX = e.changedTouches['0'].clientX
      },
      // 移动滑块
      moveSendBtn(e) {
        if (!this.moveable) {
          return
        }
        var left = ((e.touches[0].clientX - this.moveStartX) / (this.screenWidth / 750))
         /*
          *这里的494是看你滑块的宽度 取决于你自己的滑块宽度
          */
        if (left <= 494) {
          this.moveSendBtnLeft = left
        } else {
          this.moveSendBtnLeft = 494
        }
        if (left <= 0) {
          this.moveSendBtnLeft = 0
        }
      },
      // 结束移动
      moveSendBtnEnd(e) {
        if (!this.moveable) {
          return
        }
        var left = ((e.changedTouches[0].clientX - this.moveStartX) / (this.screenWidth / 750))
        if (left < 494) {
          for (let i = left; i >= 0; i--) {
            this.moveSendBtnLeft = i
          }
        } else {
          this.moveEndX = e.changedTouches[0].clientX
          this.moveable = false
          this.SendColor = '#ff6634'
          this.moveText = '验证通过'
          // 检测是否都输入了
          this.testStatus()
        }
      }
      //发送验证码和登录的省略了
    }

基本上就这样了