最新时时彩平台演示 中新时时彩要不要交税 新时时彩三星组六技巧 最新时时彩源码修改 新时时彩遗漏走势图 新时时彩预测方法 新时时彩计算器 新时时彩开奖皇冠网址 新时时彩组三怎么玩 最新时时彩后四稳赚 新时时彩官方开奖网站 新时时彩人工计划 新时时彩开奖漏洞 新时时彩最长遗漏 新时时彩中奖顺序 360新时时彩技巧-轴承资讯 新时时彩停售 最新时时彩杀号高手 新时时彩三星走势图 玩新时时彩有什么技巧 新时时彩3星和尾走势 新时时彩后一公式 重新时时彩网站 新时时彩遗漏统计软件 吉林新时时彩走势图 新时时彩中奖怎么查 新时时彩是什么地方 新时时彩中奖怎么查 新时时彩下载手机版下载 新时时彩贴吧 最新时时彩计划软件 大赢家新时时彩 新时时彩注册送彩金 新时时彩组选投注技巧 新时时彩走势图 新时时彩万能5码 新时时彩模拟 新疆新时时彩往期开奖号码 新时时彩的玩法 新时时彩稳赚计划 最新时时彩70注 新时时彩返奖率 新时时彩杀号定胆360 新时时彩后二杀号 新时时彩振幅走势 最新时时彩教程 新时时彩后台软件 新时时彩几点开始 新时时彩日赚几百 最新时时彩注册送20
用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

1

主题

7

帖子

134

积分

架构狮

Rank: 3Rank: 3

积分
134
QQ
本帖最后由 xiaoyan2015 于 2018-12-15 00:07 编辑

微信小程序自定义键盘wcKeyboard|小程序仿微信支付数字密码键盘|仿支付宝支付键盘
微信小程序官方组件里面并没有键盘插件,有时需要用到的话,只能是使用<input type="number">来唤起系统键盘了,在某些场景下,自定义数字键盘还是有需要?#27169;?#22914;:商城系统零钱支付、会员卡支付等,需要输入密码的时候,如果能使用自定义数字键盘的话,会有比较好的用户体验。










[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(?#21482;?#21495;码) pwd(密码●)
        len: 6,                                            //密码长度
        complete: null,                        //密码输入完成回调函数(返回键盘值)
        max: '',                                    //键盘可输入的最大值
        style: '',                                  //自定键盘样式
        skin: 'wechat',                        //键盘样式        wechat(微信键盘)-默认          alipay(支付宝键盘)
        ok: null,                                    //确定按钮回调函数
        oninput: null,                        //输入时的回调函数

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

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

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


评分

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

查看全部评分

分享至 : QQ空间
4 人收藏
收藏了  很厉害!
发新帖
您需要登录后才可以回帖 登录 | 立即注册
新时时彩软件