微信小程序，验证码输入

效果预览

写了个小程序验证码输入的小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;}