欧酷网

您的位置:主页>网络>

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

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

这个是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="{{inputData.value_num}}"
        height="{{inputData.height}}" width="{{inputData.width}}" see="{{inputData.see}}" interval="{{inputData.interval}}">
      </paySix>
     </view>
  </view>
 </view>
 

index.wxss

 

 

index.json

 

 

组件里面的东西也修改了,但这个不能上传文件,有点麻烦,但还是贴出来吧,主要是修改了样式,

sininput.js

 

sixinput.wxml

 

sixinput.wxss

 

主要的是这些,直接复用

  • 点赞

  • 收藏

  • 分享

  •    
    • 文章举报

想要飞翔的小猪

 
发布了100 篇原创文章 ·    获赞 112 ·    访问量 19万+  

私信

关注

相关文章推荐