仿短信验证码连续输入

页面 8个框

<view class="text_code">请输入八位数核销码</view>
<view class="view_num_box flex_row main_axis_space_between"><view class="view_numBox_item" wx:for="{{8}}" style="{{numList.length != index?'border: 1rpx solid #dddddd;':'border: 1rpx solid blue;'}}"><view>{{numList[index]}}</view></view>
</view>

键盘

<view class="view_keyboard"><view wx:for="{{keyboard}}" wx:key="index" class="flex_row view_num_line"><block wx:for="{{item}}" wx:for-item="numItem" wx:key="numIndex"><view style="flex:1; {{(numItem===''||numItem=='D')?'background: #f3f3f3;':'background: #ffffff;'}}" class="view_num_line_item" bindtap="keyboardClick" data-num="{{numItem}}"><view wx:if="{{numItem!=='D'}}">{{numItem}}</view><image src="https://static.pixiaomiao.com/sale-cloud/images/icon_delete.png" style="width:66rpx;height:46rpx;" wx:if="{{numItem == 'D'}}"></image></view></block></view>
</view>

data: {keyboard:[ [1,2,3], [4,5,6], [7,8,9], ["",0,'D'] ],Numkeyboard:'',numList:[]
},
keyboardClick:function(e){// console.log(e.currentTarget.dataset.num)const num = e.currentTarget.dataset.num;let numList = this.data.numListif( num!=='' && num != 'D'&&numList.length<= 7){// console.log(num)numList.push(num)}if(num == 'D'){numList.pop()}this.setData({numList})
},

css 流式布局

.text_code{
font-size: 28rpx;
color: #A8A8A8;
text-align: center;
margin-top: 80rpx;
}

.view_num_box{
margin: 40rpx;
}
.view_numBox_item{
/* border: 1rpx solid #dddddd; */
width: 70rpx;
height: 100rpx;
text-align: center;
line-height: 100rpx;
}
.view_num_line{
border-top:2rpx solid #dddddd;
}
.view_num_line_item{
font-size: 60rpx;
padding: 18rpx;
text-align: center;
border-left: 2rpx solid #dddddd;
background: #ffffff;
}
.view_keyboard{
position: fixed;
left: 0;
bottom: 0;
right: 0;
}
.view_other{
font-size: 24rpx;
color: #999999;
text-align: center;
margin-top: 300rpx;
}
.text_erweima{
font-size: 32rpx;
color: #333333;
margin-left: 16rpx;
}
.view_erweima{
border: 1px solid #666666;
border-radius: 45rpx;
padding: 22rpx 177rpx;
margin: 47rpx;
}

仿短信验证码连续输入相关推荐

android 自动获取短信,安卓app怎样获取短信验证码自动输入
这个你要自己写吗? 我建议你直接调用短信平台的接口不就可以了吗? 短信发送 //接口地址 String url = "http://183.203.28.5:9000/HttpSmsMt&q ...
Android开发之属于你的短信验证码(二)
君子欲讷于言而敏于行.-<论语> 最近身体有点不适,才注意到身体真的是最重要的,以后不管我们有多忙,一定要按时休息,坚持跑步,锻炼身体,做些颈椎的操等等,不要让我们挣的钱拿来看病,大家一起 ...
Android开发之短信验证码示例
在说Android中的短信验证码这个知识点前,我们首先来了解下聚合数据聚合数据介绍聚合数据是一家国内最大的基础数据API提供商,专业从事互联网数据服务.免费提供从天气查询.空气质量.地图坐标到金融 ...
利用聚合数据API进行Android开发之短信验证码
在说Android中的短信验证码这个知识点前,我们首先来了解下聚合数据聚合数据介绍聚合数据是一家国内最大的基础数据API提供商,专业从事互联网数据服务.免费提供从天气查询.空气质量.地图坐标到金融 ...
聚合数据短信验证码接口实现 Android开发短信验证码
在说Android中的短信验证码这个知识点前,我们首先来了解下聚合数据聚合数据介绍聚合数据是一家国内最大的基础数据API提供商,专业从事互联网数据服务.免费提供从天气查询.空气质量.地图坐标到金融 ...
html5页面发送短信验证码,H5实现APP“输入短信验证码”效果
前言曾经在浏览掘金文章时瞥到过有人分享类似的文章,大体思路上是用6个input来实现6个输入框,通过调整input的样式进而来实现这个输入短信验证码功能.刚好,最近有项目需要实现这样的验证码功能.↓ ...
element ui input限制输入6位数字(短信验证码)
<el-inputmaxlength="6"v-model.number="messageCode"oninput="value=value.r ...
Android 自动获取输入短信验证码库AutoVerifyCode
一.简介 Android的短信验证码自动输入库,内嵌自动申请权限,兼容性高,支持多项配置. 短信验证码长度验证码类型(大写字母.小写字母.大小写字母.数字.数字字母) 短信内容过滤发送者号码过滤 ...
写用户注册时遇到--请输入短信验证码
写用户注册页面接口时遇到请输入短信验证码此时我已经将页面显示的页面全部写入到页面中,点击注册时出现请输入短信验证码,而且前端写的定时器也没有显示出来具体bug如下: 接下来我检查查看了错误信息: ...

仿短信验证码连续输入

仿短信验证码连续输入

仿短信验证码连续输入相关推荐

最新文章

热门文章