微信小程序6位支付密码输入框

最新推荐文章于 2022-08-31 15:53:20 发布

想要飞翔的小猪

最新推荐文章于 2022-08-31 15:53:20 发布

阅读量3k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序密码输入框 input

本文链接：https://blog.csdn.net/dwb123456123456/article/details/104054134

版权

本文记录了一种微信小程序中实现6位数字支付密码输入框的方法，提供了github链接以及组件使用的示例代码，包括index.js、index.wxml、index.wxss和index.json。此外，还提及了对sininput.js和sixinput.wxml、sixinput.wxss的修改，方便直接复用。

摘要由CSDN通过智能技术生成

之前做过一个微信小程序密码输入框的问题，这里突然想起一个组件，感觉这个也挺常用的，所以特在此记录下，方便使用

这个是github地址：https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2Fevan2020%2Fsix-Input-box

在这里我就举个自己使用的例子，下面的是样式；具体代码还是看github上的，里面的源码可以现用

index.js


Page({
  data: {
    // 输入框参数设置     
    inputData: {
      input_value: "", //输入框的初始内容
      value_length: 0, //输入框密码位数
      isNext: true, //是否有下一步的按钮
      get_focus: true, //输入框的聚焦状态 
      focus_class: true, //输入框聚焦样式
      value_num: [1, 2, 3, 4, 5, 6], //输入框格子数
      height: "112rpx", //输入框高度
      width: "600rpx", //输入框宽度
      see: true, //是否明文展示
      interval: false, //是否显示间隔格子 
    }
  },
  onLoad: function(options) {
  
  },
  onShow: function() {},

  inputClick(e) {
    this.data.inputData.input_value = e.detail
    this.setData({
      inputData: this.data.inputData
    })
  },

})

index.wxml

<view class="codeindex">
  <view class="code_main">
    <view class="input_box">
      <paySix bindinputClick="inputClick" input_value="{
  {inputData.input_value}}" value_length="{
  {inputData.value_length}}" isNext="{
  {inputData.isNext}}" get_focus="{
  {inputData.get_focus}}" focus_class="{
  {inputData.focus_class}}" value_num="{