仿短信验证码连续输入

仿短信验证码连续输入

页面 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>

js

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.numList
  if( 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;
}