微信小程序，验证码输入框

最新推荐文章于 2024-05-09 18:42:22 发布

_ 对酒当歌 .

最新推荐文章于 2024-05-09 18:42:22 发布

阅读量4.2k

点赞数 6

分类专栏：小程序文章标签：小程序验证码输入

本文链接：https://blog.csdn.net/weixin_42284905/article/details/87933088

版权

小程序专栏收录该内容

0 篇文章 0 订阅

订阅专栏

微信小程序，验证码输入

效果预览

在这里插入图片描述
写了个小程序验证码输入的小demo，用的方法是比较猥琐的隐藏input框，输入内容绑定的方法

wxml代码

<view class="wx-page-content">
  <view class="page-title">输入验证码</view>
  <view class="page-tises"> 已发送4位验证码到<span>+86 {{phone}}</span></view>
  <view class="verificationCode">
    <input type="number" maxlength="4" bindinput="inputValue" focus />
    <view class="{{veCode[0] ? 'activeView' : 0}}">{{veCode[0]}}</view>
    <view class="{{veCode[1] ? 'activeView' : 0}}">{{veCode[1]}}</view>
    <view class="{{veCode[2] ? 'activeView' : 0}}">{{veCode[2]}}</view>
    <view class="{{veCode[3] ? 'activeView' : 0}}">{{veCode[3]}}</view>
  </view>
  <view class="lodingBtn {{veCode.length == 4 ? 'trueLoding' : ''}}">立即登录</view>
  <view class="againTime" wx:if="{{time > 0 }}">重新获取({{time}})</view>
  <view class="againTimeBtn" wx:else bindtap="againTimeBtn">重新获取</view>
</view>

js

Page({
  data: {
    phone:'15654215894',
    veCode: new Array(),
    time: 60
  },
  onLoad() {
    this.againTime()
  },
  inputValue(e) {
    let value = e.detail.value;
    let arr = [...value];
    this.setData({ veCode: arr })
  },
  againTime() {
    let time = this.data.time;
    clearInterval(timing);
    let timing = setInterval(() => {
      if (time <= 0) {
        clearInterval(timing)
      } else {
        time--;
        this.setData({
          time: time
        })
      }
    }, 1000)
  },
  againTimeBtn() {
    this.setData({ time: 60 });
    this.againTime()
  }
})

wxss

view {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.wx-page-content {
  padding: 40px;
}
.wx-page-content .page-title {
  font-size: 28px;
  color: #000;
  font-weight: 500;
  margin-bottom: 30px;
}
.wx-page-content .page-tises {
  font-size: 16px;
  color: #000;
}
.wx-page-content .page-tises span {
  color: #ACACAC;
}
.verificationCode {
  overflow: hidden;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}
.verificationCode > input {
  width: calc(200%);
  position: absolute;
  left: -100px;
  top: 20px;
  height: 60px;
  background: #e9e9e9;
  opacity: 0;
  font-size: 10px;
}
.verificationCode > view {
  width: 55px;
  border: 1rpx solid #979797;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border-radius: 4px;
  font-size: 30px;
  color: #4DBF6E;
}
.verificationCode .activeView {
  border-color: #4DBF6E;
}
.lodingBtn {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  background: #88c299;
  border-radius: 99px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 16px;
}
.trueLoding {
  background: #4DBF6E;
}
.againTime,
.againTimeBtn {
  color: #ACACAC;
  font-size: 12px;
  text-align: center;
  margin-top: 15px;
  text-decoration: underline;
}
.againTimeBtn {
  color: #59ACFF;
}