背景：

因为公司业务调整需要做用户支付这一块
开发者需要在小程序上实现一个简单的6位数密码输入框

首先想下如何实现该效果：

1.使用input覆盖在框上面，设置letter-spacing达到数字之间间距的效果，实现时发现在input组件上使用letter-spacing无效果

2.循环六个view模拟的框，光标使用动画模拟，一个隐藏的input，点击view框时触发input的Focus属性弹起键盘，同时模拟的光标展示出来，输入值后，input的value长度发生变化，设置光标位置以及模拟的密码小黑圆点

好了，废话不多数，咱们直接上手。

wxml

<view class='container'>
  <!-- 模拟输入框 -->
  <view class='pay-box {{focusType ? "focus-border" : ""}}' bindtap="handleFocus" style='width: 604rpx;height: 98rpx'>
    <block wx:for="{{boxList}}" wx:key="{{index}}">
      <view class='password-box {{index === 0 ? "b-l-n":""}}'>
        <view wx:if="{{(dataLength === item - 1)&& focusType}}" class="cursor"></view>
        <view wx:if="{{dataLength >= item}}" class="input-black-dot"></view>
      </view>
    </block>
  </view>
  <!-- 隐藏input框 -->
  <input value="{{input_value}}" focus="{{isFocus}}" maxlength="6" type="number" class='hidden-input' bindinput="handleSetData" bindfocus="handleUseFocus" bindblur="handleUseFocus" />
</view>

wxss

/* 第一个格子输入框 */
.container .b-l-n {
  border-left: none;
}

.pay-box {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  border-left: 1px solid #cfd4d3;
}

/* 支付密码框聚焦的时候 */

.focus-border {
  border-color: #0c8;
}

/* 单个格式样式（聚焦的时候） */
.password-box {
  flex: 1;
  border: 1px solid #0c8;
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 模拟光标 */

.cursor {
  width: 2rpx;
  height: 36rpx;
  background-color: #0c8;
  animation: focus 1.2s infinite;
}

/* 光标动画 */

@keyframes focus {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* 模拟输入的password的黑点 */

.input-black-dot {
  width: 20rpx;
  height: 20rpx;
  background-color: #000;
  border-radius: 50%;
}

/* 输入框 */

.hidden-input {
  margin-top: 200rpx;
  position: relative;
}

JS

Component({
  data: {
    //输入框聚焦状态
    isFocus: false,
    //输入框聚焦样式 是否自动获取焦点
    focusType: true,
    valueData: '', //输入的值
    dataLength: '',
    boxList: [1, 2, 3, 4, 5, 6]
  },
  // 组件属性
  properties: {

  },
  // 组件方法
  methods: {
    // 获得焦点时
    handleUseFocus() {
      this.setData({
        focusType: true
      })
    },

    // 失去焦点时
    handleUseBlur() {
      this.setData({
        focusType: false
      })
    },

    // 点击6个框聚焦
    handleFocus() {
      this.setData({
        isFocus: true
      })
    },

    // 获取输入框的值
    handleSetData(e) {
      // 更新数据
      this.setData({
        dataLength: e.detail.value.length,
        valueData: e.detail.value
      })
      // 当输入框的值等于6时（发起支付等...）
      if (e.detail.value.length === 6) {
        // 通知用户输入数字达到6位数可以发送接口校验密码是否正确
        this.triggerEvent('initData', e.detail.value)
      }
    }
  }
})

实现方式很简单，有点小问题，还有一些后续准备做的优化点，等完善后上线后再来修改一波。

最后附上代码片段：

https://developers.weixin.qq.com/s/8CtRqJmT7W8k