微信小程序实现类似微信提现、支付宝提现充值等 “自定义键盘“可实现自定义右下角搜索内容，手写input功能view组件，实现焦点获取事件

效果图

keyboard.wxml

<view class='input_view'><text class='title'>提现金额：</text><view class='input_box' bindtap='pay'><text class='input_label'>￥</text><text class='content'>{{inputPassword}}</text><view class='className'></view></view>
</view>
<van-transition show="{{ passwordInputHidden }}" name="" duration="{{ { enter: 300, leave: 300 } }}"enter-class="van-enter-class" enter-active-class="van-enter-active-class" leave-active-class="van-leave-active-class"leave-to-class="van-leave-to-class"><view class="keyboardbox"><view class="reset-down" bindtap='pay'><van-icon name="arrow-down" size="36rpx" /></view><view class='keyboard' bindchange="passwordInputHidden"><view class='left number'><view data-key="1" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>1</view><view data-key="2" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>2</view><view data-key="3" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>3</view><view data-key="4" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>4</view><view data-key="5" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>5</view><view data-key="6" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>6</view><view data-key="7" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>7</view><view data-key="8" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>8</view><view data-key="9" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>9</view><view class="zero" data-key="0" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>0</view><view data-key="." hover-class='active' hover-stay-time='100' bindtap='inputPassword'>.</view></view><view class='right ctr-btn'><view class='ctr-btn-item backout' hover-class='active' hover-stay-time='100' bindtap='clear'><van-icon name="close" /></view><view class='ctr-btn-item submit' hover-class='active' hover-stay-time='100' bindtap='passwordInputHidden'>提现</view></view></view></view>
</van-transition>

keyboard.wxss

.input_view {width: 700rpx;height: 500rpx;background: #fff;margin: 25rpx auto;border-radius: 10rpx;padding: 40rpx;box-sizing: border-box;
}.title {display: block;line-height: 90rpx;font-size: 30rpx;color: #aaa;
}.input_box {display: flex;padding: 20rpx 0;height: 90rpx;border-bottom: 1px solid #efefef;
}.input_label {font-size: 35rpx;font-weight: bold;margin-right: 5rpx;
}.content {font-size: 80rpx;line-height: 90rpx;font-weight: bold;
}.className {width: 6rpx;height: 90rpx;background: #666;border-radius: 6rpx;animation: twinkling 1s infinite;
}.animated {animation-duration: 1s;animation-fill-mode: both
}@-webkit-keyframes twinkling {0% {opacity: 0;}100% {opacity: 1;}
}.pay {display: block;width: 300rpx;height: 90rpx;border-radius: 12rpx;background: #1dc063;color: #fff;text-align: center;line-height: 90rpx;margin: 50rpx auto;font-size: 32rpx;
}
.reset-down{text-align: center;padding: 10rpx;
}
.keyboard {width: 100%;display: flex;background-color: #fff;border-top: 10rpx solid #eee;
}.keyboard .number {display: flex;width: 570rpx;flex-wrap: wrap;
}.keyboard .number view {width: 190rpx;height: 120rpx;line-height: 120rpx;text-align: center;font-size: 46rpx;font-weight: bold;box-sizing: border-box;border-left: 10rpx solid #eee;border-bottom: 10rpx solid #eee;
}.keyboard .number .zero {width: 380rpx;
}.keyboard .ctr-btn {width: 180rpx;
}
.keyboard .ctr-btn .backout {height: 120rpx;line-height: 120rpx;text-align: center;box-sizing: border-box;border-left: 10rpx solid #eee;border-right: 10rpx solid #eee;border-bottom: 10rpx solid #eee;
}.keyboard .ctr-btn .submit {height: 360rpx;line-height: 360rpx;text-align: center;box-sizing: border-box;border-left: 10rpx solid #eee;border-right: 10rpx solid #eee;border-bottom: 10rpx solid #eee;background-color: #1dc063;
}.keyboard .ctr-btn view .iconfont {font-size: 44rpx !important;color: #c30;
}.keyboard .ctr-btn view:nth-child(2) {font-size: 46rpx;color: #fff;
}.keyboard .active {background-color: #e4e7ed;
}.activity {background-color: #fff;padding: 25rpx 20rpx;display: flex;align-items: center;justify-content: space-between;font-size: 24rpx;border-bottom: 10rpx solid #f6f6f6;
}.activity.activity-item {font-size: 26rpx;
}.arrows-right {width: 30rpx;height: 30rpx;
}.arrows-right.active {transform: rotate(270deg);
}.van-enter-active-class,
.van-leave-active-class {position: fixed;bottom: 0px;transition: all;
}.van-enter-class,
.van-leave-to-class {bottom: -100%;
}

keyboard.js

Page({/*** 页面的初始数据*/data: {inputPassword: '', //输入的密码passwordInputHidden: true, //hidden是true 默认隐藏pay_type: '', //支付方式password: 123456, //设置的密码 这里写死 实际开发中后台专门设置一个表存储用户设置的密码show:false},isshowone(){debuggerthis.setData({show:!this.data.show})},pay(e) {//你选择的支付方式var pay_type = e.currentTarget.dataset.pay_type;var _this = this;if (pay_type == 'weipay') {//此处写入微信支付需要执行的代码不做过多介绍} else {//内部支付 打开键盘_this.passwordInputHidden();}},inputPassword(e) {if (this.data.inputPassword.indexOf(".") != -1 && this.data.inputPassword.substring(this.data.inputPassword.indexOf(".") + 1, this.data.inputPassword.length).length == 2) {return;}// 如果当前文本中有 .  并且当前点击的还是 . 就不能再输入了if (this.data.inputPassword.indexOf(".") != -1 && e.currentTarget.dataset.key == ".") {return;}// 第一位如果是 0 那么就不能再输入if (this.data.inputPassword == "0" && e.currentTarget.dataset.key != '.') {return;}if (this.data.inputPassword == '' && e.currentTarget.dataset.key == '.') {e.currentTarget.dataset.key = '0.'}//键盘输入的密码 赋值给inputPasswordthis.data.inputPassword = this.data.inputPassword + e.currentTarget.dataset.key;this.setData({inputPassword: this.data.inputPassword});},passwordInputHidden() {this.setData({passwordInputHidden: !this.data.passwordInputHidden //取反 打开关闭小键盘});this.setData({inputPassword: ''});},//删除输入错误的密码clear() {var index = this.data.inputPassword.length;if (index > 0) {var inputPassword = this.data.inputPassword.substr(0, index - 1);this.setData({inputPassword: inputPassword});}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

keyboard.json

{"usingComponents": {"van-button": "/miniprogram_npm/vant-weapp/button/index","van-transition": "/miniprogram_npm/vant-weapp/transition/index","van-icon": "/miniprogram_npm/vant-weapp/icon/index"}
}

微信小程序实现类似微信提现、支付宝提现充值等 “自定义键盘“可实现自定义右下角搜索内容，手写input功能view组件，实现焦点获取事件相关推荐

c语言微信小程序编程,微信小程序实现类似微信点击语音播放效果
本文实例为大家分享了微信小程序类似平常微信语音聊天的效果,不会互相干扰播放状态,供大家参考,具体内容如下根据开发的需求,先理清一下思路,点击语音播放与暂停/停止,切换下一个语音等: 小程序对于aud ...
微信小程序，类似微信点击语音播放效果，不会互相干扰播放状态
类似平常微信语音聊天的效果- 根据开发的需求,先理清一下思路,点击语音播放与暂停/停止,切换下一个语音等: 小程序对于audio的组件的一些api方法已经不支持了,详情可以参看:微信小程序audio组 ...
微信小程序实现类似微信评论区回复组件(mpx)
mpx开发微信小程序实现回复组件效果组件内容: <template><view class="apply-component"><van-popu ...
Android APP跳转微信小程序和APP跳转支付宝小程序传参
Android APP跳转微信小程序和APP跳转支付宝小程序传参微信开放文档链接 MINIPROGRAM_TYPE_PREVIEW:体验版. MINIPROGRAM_TYPE_TEST:开发版 MI ...
微信小程序开发学习笔记001--认识微信小程序,第一个微信小程序
第一天,认识微信小程序,第一个微信小程序 1.什么是微信小程序? 是h5网页嘛?不是微信张小龙说: 小程序是一种不需要下载安装即可使用的应用, 它实现了应用"触手可及"的梦想,用 ...
微信小程序后端框架|微信公众号后端框架（C# WebAPI）
微信小程序后端框架|微信公众号后端框架(C# WebAPI) 微信小程序简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的 ...
wechat-app-mall — 微信小程序商城，微信小程序微店
简介: wechat-app-mall - 微信小程序商城,微信小程序微店网盘下载地址: http://kekewangLuo.cc/5Y95XKVEXkL0 图片:
【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...
[转]微信小程序之购物车 —— 微信小程序实战商城系列（5）
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城 ...
微信小程序云开发-微信小程序账号申请及新手环境配置
申请一个微信小程序账号在微信开发时,我们yx时候可能需要用到微信小程序,微信小程序云开发需要使用注册的小程序appid,测试和游客进入是没有云开发的功能,所以我们需要注册一个微信小程序账号.在注册账 ...

微信小程序实现类似微信提现、支付宝提现充值等 “自定义键盘“可实现自定义右下角搜索内容，手写input功能view组件，实现焦点获取事件

keyboard.wxml

keyboard.wxss

keyboard.js

keyboard.json

微信小程序实现类似微信提现、支付宝提现充值等 “自定义键盘“可实现自定义右下角搜索内容，手写input功能view组件，实现焦点获取事件相关推荐

最新文章

热门文章