小程序验证码动画效果

• wxml

<view class="code_container">
  <view class="code_box"  data-flag="{{ true }}" bindtap="handleFocus">
    <text class="{{ code[0] ? 'active_code' : ''}}">{{ code[0] }}</text>
    <text class="{{ code[1] ? 'active_code' : ''}}">{{ code[1] }}</text>
    <text class="{{ code[2] ? 'active_code' : ''}}">{{ code[2] }}</text>
    <text class="{{ code[3] ? 'active_code' : ''}}">{{ code[3] }}</text>
    <text class="{{ code[4] ? 'active_code' : ''}}">{{ code[4] }}</text>
    <text class="{{ code[5] ? 'active_code' : ''}}">{{ code[5] }}</text>
    <text class="{{ code[6] ? 'active_code' : ''}}">{{ code[6] }}</text>
    <text class="{{ code[7] ? 'active_code' : ''}}">{{ code[7] }}</text>
  </view>
  <input class="ipt" type="number" focus="{{foucs}}" bindinput="handleInput" bindblur="handleFocus" data-flag="{{ false }}" maxlength="8"/>
</view>

• wxss

.code_container {
  margin: 20rpx;
  padding: 40rpx 40rpx 48rpx 40rpx;
  background-color: white;
  box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.02);
  border-radius: 16rpx;
}

.code_box {
  display: flex;
  justify-content: space-between;
}

.code_box text {
  width: 70rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  font-size: 70rpx;
  color: #000;
  font-weight: 700;
  border: 1px solid #4780BA;
  border-radius: 10rpx;
}

.ipt {
  width: 0;
}

.active_code {
  border: 1px solid #FF8B1A !important;
}

• js

const app = getApp()

Page({
  data: {
    foucs: false,
    code: ''
  },

  handleInput({ detail: { value }}) {
    this.setData({ code: value })
  },

  handleFocus({ currentTarget: { dataset: { flag }}}) {
    this.setData({ foucs: flag })
  }
})