微信小程序数字键盘（仿微信转账键盘）

微信小程序input自带数字输入键盘，不过是直接调用的系统键盘，无法个性化。

代码中使用使用了Vant WeappVant UI小程序版，这里就不介绍相关安装说明了，大家自行安装Vant Weapp。

json 用到的组件

{"usingComponents": {"van-cell": "@vant/weapp/cell/index","van-button": "@vant/weapp/button/index","van-popup": "@vant/weapp/popup/index","van-field": "@vant/weapp/field/index","van-row": "@vant/weapp/row/index","van-col": "@vant/weapp/col/index"}
}

wxml 结构

<van-cell title="分数" value="{{score || '点击打分'}}" bindtap="tapScore" /><!-- 打分键盘 -->
<van-popupshow="{{ keyboardShow }}"position="bottom"custom-style="height: 508rpx;"bind:close="onClose"
><view class="keyborad"><view class="input"><van-fieldvalue="{{ value }}"custom-style="border: 2prx solid #dcdee0"placeholder="请选择分数"disabled/></view><view class="number-keyboard"><van-row class="number" gutter="10"><van-colwx:for="{{number}}"wx:key="index"data-key="{{item}}"custom-class="number-item"span="{{item === 0 ? '16' : '8'}}"bindtap="tapNumber"><view class="number-item__key tap-key">{{item}}</view></van-col></van-row><view class="operation"><view class="del tap-key" bindtap="tapBksp"><image class="del-icon" src="/assets/backspace.png"></image></view><view class="confirm tap-key" bindtap="confirm">确定</view></view></view></view>
</van-popup>

js 内容

Page({data: {score: '',keyboardShow: false,value: '',number: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '.']},tapScore() {this.setData({keyboardShow: true})},onClose() {this.setData({keyboardShow: false})},// number点击tapNumber(e) {const { key } = e.currentTarget.datasetlet { value } = this.datavalue += key/*** 限制输入* 开头不能是小数点* 只能有一位小数点* 0开头只能跟小数点* 小数点后限制一位*/value = String(value).replace(/^\./g, '').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^00$/, '0').replace(/^0(\d)/g, '$1').replace(/^(-)*(\d+)\.(\d{1}).*$/, '$1$2.$3')this.setData({value})},// 退格tapBksp() {let { value } = this.datavalue = String(value)value = value.substr(0, value.length - 1)this.setData({value})},// 确定confirm() {let { value } = this.datathis.setData({score: value,keyboardShow: false})},
})

wxss 样式


.keyborad .number-keyboard {display: flex;background-color: #ebedf0;padding: 20rpx 20rpx 0 20rpx;
}
.keyborad .number-keyboard .tap-key:active {opacity: 0.8;
}
.keyborad .number-keyboard .number {flex: 1;
}
.keyborad .number-keyboard .number .number-item {margin-bottom: 20rpx;
}
.keyborad .number-keyboard .number .number-item .number-item__key {background-color: #fff;text-align: center;height: 80rpx;line-height: 80rpx;border-radius: 8rpx;font-size: 32rpx;font-weight: 700;
}
.keyborad .number-keyboard .operation {width: 200rpx;display: flex;flex-direction: column;margin: 0 0 20rpx 20rpx;
}
.keyborad .number-keyboard .operation .del {height: 80rpx;text-align: center;margin-bottom: 20rpx;background-color: #fff;border-radius: 8rpx;display: flex;align-items: center;justify-content: center;
}
.keyborad .number-keyboard .operation .del .del-icon {width: 40rpx;height: 40rpx;
}
.keyborad .number-keyboard .operation .confirm {flex: 1;display: flex;align-items: center;justify-content: center;background-color: #04943f;border-radius: 8rpx;color: #fff;font-size: 36rpx;
}
.keyborad .van-field__control--disabled {color: #666 !important;
}

微信小程序数字键盘（仿微信转账键盘）相关推荐

基于微信小程序开发的仿微信demo
(本文参考自github/liujians,地址:https://github.com/liujians/weApp) 作者声明: 基于微信小程序开发的仿微信demo 整合了ionic的样式库和we ...
微信小程序开发之——仿微信视频录制上传
一仿微信视频录制效果二业务说明视频录制前,只显示取消和视频录制按钮录制开始后,只显示视频录制按钮,并且上方显示时间.录制按钮显示录制进度录制完成后,显示重拍.取消.上传按钮录制完成后,点 ...
微信小程序自定义输入仿咸鱼发布
微信小程序自定义输入仿咸鱼发布效果图效果图2 主要代码 .js // pages/user/release/release.js import Toast from 'vant-weapp/toa ...
分享微信小程序资讯类仿LOL盒子开发
分享微信小程序资讯类仿LOL盒子开发一.主要功能联盟盒子微信小程序功能分为管理员和非管理员功能.系统拥有多个非管理员用户,管理员用户仅有一个角色,对于管理员而言,管理员一般拥有操作用户信息比如更改 ...
微信小程序的网络请求 —— 微信小程序教程系列（14）
网络请求,基本上是必须的环节之一. 小程序提供了wx.request(object),与开发者的服务器实现数据交互的一个很重要的api. 最简单的用法如下(以GET请求为例) <view bin ...
微信小程序调用JSAPI进行微信支付
微信小程序调用JSAPI进行微信支付 1.小程序中先调用接口在微信支付服务后台生成预支付交易单,返回正确的预支付交易后调起支付: 2.商户server调用再次签名: 3.唤起微信支付页面,进行支付: ...
H5静态页面跳转微信小程序；从外部浏览器，点击H5链接跳转打开微信小程序；以及在微信内直接点击H5链接打开微信小程序；
参考链接需求:从外部浏览器,点击H5链接跳转打开微信小程序:以及在微信内直接点击H5链接打开微信小程序: 步骤1: 小程序开发需要使用云开发创建项目,使用云开发生成的项目会自带云函数文件夹: 步骤2 ...
微信小程序python自动化测试_微信小程序的自动化测试框架
微信小程序的自动化测试框架微信发布了小程序的自动化测试框架Minium,提供了多种运行验证方式,其特点: 支持一套脚本,iOS & Android & 模拟器,三端运行提供丰富的页 ...
python开发微信小程序-Python 开发者的微信小程序开发实践
导读在知乎上,有人提问"如何使用 Python 开发微信小程序". 其实微信小程序作为一个前端的机制,Python 并不能插上边.只不过可以作为后端接口为微信小程序提供数据服务而 ...
微量小程序联盟，如何实现微信小程序换量和微信小程序推广？
长期以来各位许多小程序运营者,一直在为小程序如何推广和烦恼!今天我就为大家推荐一个小程序换量推广平台,可以快速帮我们解决小程序粉丝增长难的问题! 微量小程序联盟--专注小程序换量推广微量小程序联盟- ...

微信小程序数字键盘（仿微信转账键盘）

微信小程序数字键盘（仿微信转账键盘）相关推荐

最新文章

热门文章