小程序按钮时间限制

最新推荐文章于 2023-02-07 17:24:24 发布

头疼的可达鸭

最新推荐文章于 2023-02-07 17:24:24 发布

阅读量331

点赞数

文章标签：前端微信小程序 php

原文链接：https://blog.csdn.net/qq_59527682/article/details/123369933

版权

1.wxml页面

<view class="container">
  <view class="title">登录</view>
  <form catchsubmit="login">
    <view class="inputView">
      <input class="inputText" placeholder="请输入手机号" name="phone" bindinput="phone" />
    </view>
    <view class="inputView">
      <input class="inputText" placeholder="请输入验证码" name="code" />
      <button class="line"  size="mini" bindtap="sendcode">{{text}}</button>
    </view>
    <view class="loginBtnView">
      <button class="loginBtn" type="primary" formType="submit">登录</button>
    </view>
  </form>
</view>

2.js页面初始数据

data: {
        text:'发送验证码',
        disabled: false,
        button:true
    },

3.js页面加载时间

let that = this;
        let phone = this.data.phone;
        let time = 30;
        setInterval(function(){
          time--;
          if(time > 0){
            that.setData({
              text:time,
              button:true
            })
          }else{
            that.setData({
              text:'发送验证码',
              button:false
            })
          }
        },1000);