用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

1

主题

8

帖子

148

积分

架构狮

Rank: 3Rank: 3

积分
148
QQ
2018-12-15 00:05:44 xiaoyan2015 架构狮 楼主 1753
本帖最后由 xiaoyan2015 于 2018-12-15 00:07 编辑

微信小程序自定义键盘wcKeyboard|小程序仿微信支付数字密码键盘|仿支付宝支付键盘
微信小程序官方组件里面并没有键盘插件,有时需要用到的话,只能是使用<input type="number">来唤起系统键盘了,在某些场景下,自定义数字键盘还是有需要的,如:商城系统零钱支付、会员卡支付等,需要输入密码的时候,如果能使用自定义数字键盘的话,会有比较好的用户体验。
001360截图20181211174021524.png
000360截图20181211174021524.png
002360截图20181211174641044.png
003360截图20181211175429388.png
004360截图20181211174711475.png
005360截图20181211174802915.png
006360截图20181211174846539.png
007360截图20181211174935420.png
008360截图20181211175016330.png
009360截图20181211175154980.png
[HTML] 纯文本查看 复制代码
<!-- //支付宝键盘布局 -->
<view class="ul">
        <view class="li kb-limit nbor {{err[0]}}">{{err[1]}}</view>
        <view class="li kb-pwd nbor" wx:if="{{type&&type=='pwd'}}"><view class="keyboard__panel-pwd"><label class="kb-pwdlbl" wx:for="{{len}}" wx:key="index"><input type="password" maxlength="1" value="{{kbVal[index]}}" disabled /></label></view></view>
        <view class="li kb-result nbor" style="display:{{debug ? 'block' : 'none'}};">{{kbVal}}</view>

        <view class="kb-flexbox flexbox">
          <view class="kb-one flex1">
                <view class="li kb-number nbor" data-text="1" bind:tap="tapNum">1</view>
                <view class="li kb-number" data-text="2" bind:tap="tapNum">2</view>
                <view class="li kb-number" data-text="3" bind:tap="tapNum">3</view>
                <view class="li kb-number nbor" data-text="4" bind:tap="tapNum">4</view>
                <view class="li kb-number" data-text="5" bind:tap="tapNum">5</view>
                <view class="li kb-number" data-text="6" bind:tap="tapNum">6</view>
                <view class="li kb-number nbor" data-text="7" bind:tap="tapNum">7</view>
                <view class="li kb-number" data-text="8" bind:tap="tapNum">8</view>
                <view class="li kb-number" data-text="9" bind:tap="tapNum">9</view>
                <view class="li kb-float nbor {{type=='tel' || type=='pwd' ? 'disabled' : ''}}" data-text="." bind:tap="tapFloat">.</view>
                <view class="li kb-zero" data-text="0" bind:tap="tapZero">0</view>
                <view class="li kb-xclose" bind:touchstart="xcloseTaped"><image src="/utils/component/wcKeyboard/img/icon__kb-xclose2.png" mode="aspectFit"></image></view>
          </view>
          <view class="kb-two">
                <view class="li kb-del" bind:tap="tapDel"><image src="/utils/component/wcKeyboard/img/icon__kb-del.png" mode="aspectFit"></image></view>
                <view class="li kb-sure" bind:tap="tapSure">确定</view>
          </view>
        </view>
</view>

[JavaScript] 纯文本查看 复制代码
wcKeyboard = function (options) {
    __this = getCurrentPages()[getCurrentPages().length - 1]; //获取当前page实例(跨页面挂载)

    var that = this,
      config = {
        debug: false,

        id: 'wcKeyboard',                //键盘ID标识 (不同ID对应不同键盘)
        type: '',                                    //键盘值类型  选项:tel(手机号码) pwd(密码●)
        len: 6,                                            //密码长度
        complete: null,                        //密码输入完成回调函数(返回键盘值)
        max: '',                                    //键盘可输入的最大值
        style: '',                                  //自定键盘样式
        skin: 'wechat',                        //键盘样式        wechat(微信键盘)-默认          alipay(支付宝键盘)
        ok: null,                                    //确定按钮回调函数
        oninput: null,                        //输入时的回调函数

        shade: true,                          //是否显示遮罩层
        shadeClose: true,                //是否点击遮罩时关闭层
        opacity: '',                          //遮罩层透明度

        anim: '',                                    //scaleIn:缩放打开  fadeIn:渐变打开  fadeInDown:底部向上渐变打开  rollIn:左侧翻转打开  shake:震动  footer:底部向上弹出
        zIndex: 9999,                          //设置键盘层叠
      };

    that.opts = util.extend(options, config);
    that.init();
  };


评分

参与人数 1原创 +1 浮云 +20 收起 理由
天下钞票 + 1 + 20 很给力!

查看全部评分

收藏了  很厉害!
发新帖
您需要登录后才可以回帖 登录 | 立即注册