微信小程序 密码输入(源码下载)
时间:2019-03-30
本文章向大家介绍微信小程序 密码输入(源码下载),主要包括微信小程序 密码输入(源码下载)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
设计支付密码的输入框
效果如下:
实例代码:
<view class="pay"> <view class="title">支付方式</view> <view catchtap="wx_pay" class="wx_pay"> <i class="icon {{payment_mode==1?'active':''}}" type="String"></i> <text>微信支付</text> </view> <view catchtap="offline_pay" class="offline_pay"> <i class="icon {{payment_mode==0?'active':''}}" type="String"></i> <text>对公打款</text> </view> <block wx:if="{{balance!=0}}"> <view catchtap="wallet_pay" class="wallet_pay"> <i class="icon {{payment_mode==2?'active':''}}" type="String"></i> <text>钱包支付(余额:{{balance/100}}元)</text> </view> </block> <block wx:if="{{balance==0}}"> <view class="wallet_pay"> <i class="icon" type="String" style="background:#e8e8e8;border:none;"></i> <text style="color:#999">钱包支付(余额不足)</text> </view> </block> </view> <view catchtap="pay" class="save">确定</view> <!--输入钱包密码--> <view wx:if="{{wallets_password_flag}}" class="wallets-password"> <view class="input-content-wrap"> <view class="top"> <view catchtap="close_wallets_password" class="close">×</view> <view class="txt">请输入支付密码</view> <view catchtap="modify_password" class="forget">忘记密码</view> </view> <view class="actual_fee"> <span>¥</span> <text>{{actual_fee/100}}</text> </view> <view catchtap="set_Focus" class="input-password-wrap"> <view class="password_dot"> <i wx:if="{{wallets_password.length>=1}}"></i> </view> <view class="password_dot"> <i wx:if="{{wallets_password.length>=2}}"></i> </view> <view class="password_dot"> <i wx:if="{{wallets_password.length>=3}}"></i> </view> <view class="password_dot"> <i wx:if="{{wallets_password.length>=4}}"></i> </view> <view class="password_dot"> <i wx:if="{{wallets_password.length>=5}}"></i> </view> <view class="password_dot"> <i wx:if="{{wallets_password.length>=6}}"></i> </view> </view> </view> <input bindinput="set_wallets_password" class="input-content" password type="number" focus="{{isFocus}}" maxlength="6" /> </view>
index.js
Page({ data: { payment_mode: 1,//默认支付方式 微信支付 isFocus: false,//控制input 聚焦 balance:100,//余额 actual_fee:20,//待支付 wallets_password_flag:false//密码输入遮罩 }, //事件处理函数 onLoad: function () { }, wx_pay() {//转换为微信支付 this.setData({ payment_mode: 1 }) }, offline_pay() {//转换为转账支付 this.setData({ payment_mode: 0 }) }, wallet_pay() { this.setData({//转换为钱包支付 payment_mode: 2 }) }, set_wallets_password(e) {//获取钱包密码 this.setData({ wallets_password: e.detail.value }); if (this.data.wallets_password.length == 6) {//密码长度6位时,自动验证钱包支付结果 wallet_pay(this) } }, set_Focus() {//聚焦input console.log('isFocus', this.data.isFocus) this.setData({ isFocus: true }) }, set_notFocus() {//失去焦点 this.setData({ isFocus: false }) }, close_wallets_password () {//关闭钱包输入密码遮罩 this.setData({ isFocus: false,//失去焦点 wallets_password_flag: false, }) }, pay() {//去支付 pay(this) } }) /*-----------------------------------------------*/ /*支付*/ function pay(_this) { let apikey = _this.data.apikey; let id = _this.data.id; let payment_mode = _this.data.payment_mode if (payment_mode == 1) { // 微信支付 // 微信自带密码输入框 console.log('微信支付') } else if (payment_mode == 0) { // 转账支付 后续跳转至传转账单照片 console.log('转账支付') } else if (payment_mode == 2) { // 钱包支付 输入密码 console.log('钱包支付') _this.setData({ wallets_password_flag: true, isFocus: true }) } } // 钱包支付 function wallet_pay(_this) { console.log('钱包支付请求函数') /* 1.支付成功 2.支付失败:提示;清空密码;自动聚焦isFocus:true,拉起键盘再次输入 */ }
index.wxss
page { height: 100%; width: 100%; background: #e8e8e8; } page .pay { display: flex; flex-direction: column; background: #fff; } page .pay .title { height: 90rpx; line-height: 90rpx; font-size: 28rpx; color: #353535; padding: 0 23rpx; border-bottom: 1rpx solid #ddd; box-sizing: border-box; } page .pay .wx_pay, page .pay .offline_pay, page .pay .wallet_pay { margin: 0 26rpx; height: 90rpx; line-height: 90rpx; border-bottom: 2rpx solid #ddd; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; } page .pay .wx_pay .icon, page .pay .offline_pay .icon, page .pay .wallet_pay .icon { width: 34rpx; height: 34rpx; border: 2rpx solid #ddd; box-sizing: border-box; border-radius: 50%; } page .pay .wx_pay .icon.active, page .pay .offline_pay .icon.active, page .pay .wallet_pay .icon.active { border: 10rpx solid #00a2ff; } page .pay .wx_pay text, page .pay .offline_pay text, page .pay .wallet_pay text { margin-left: 20rpx; color: #353535; font-size: 26rpx; } page .pay .wallet_pay { border: 0; border-top: 2rpx solid #ddd; } page .pay .offline_pay { border: 0 none; } page .save { margin: 80rpx 23rpx; color: #fff; background: #00a2ff; height: 88rpx; line-height: 88rpx; text-align: center; font-size: 30rpx; border-radius: 10rpx; } page .wallets-password { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); } page .wallets-password .input-content-wrap { position: absolute; top: 200rpx; left: 50%; display: flex; flex-direction: column; width: 600rpx; margin-left: -300rpx; background: #fff; border-radius: 20rpx; } page .wallets-password .input-content-wrap .top { display: flex; align-items: center; height: 90rpx; border-bottom: 2rpx solid #ddd; justify-content: space-around; } page .wallets-password .input-content-wrap .top .close { font-size: 44rpx; color: #999; font-weight: 100; } page .wallets-password .input-content-wrap .top .forget { color: #00a2ff; font-size: 22rpx; } page .wallets-password .input-content-wrap .actual_fee { display: flex; align-items: center; justify-content: center; color: #000; height: 100rpx; margin: 0 23rpx; border-bottom: 2rpx solid #ddd; } page .wallets-password .input-content-wrap .actual_fee span { font-size: 24rpx; } page .wallets-password .input-content-wrap .actual_fee text { font-size: 36rpx; } page .wallets-password .input-content-wrap .input-password-wrap { display: flex; align-items: center; justify-content: center; height: 150rpx; } page .wallets-password .input-content-wrap .input-password-wrap .password_dot { display: flex; align-items: center; justify-content: center; text-align: center; color: #000; box-sizing: border-box; width: 90rpx; height: 90rpx; border: 2rpx solid #ddd; border-left: none 0; } page .wallets-password .input-content-wrap .input-password-wrap .password_dot:nth-child(1) { border-left: 2rpx solid #ddd; } page .wallets-password .input-content-wrap .input-password-wrap .password_dot i { background: #000; border-radius: 50%; width: 20rpx; height: 20rpx; } page .wallets-password .input-content { position: absolute; opacity: 0; left: -100%; top: 600rpx; background: #f56; z-index: -999; } page .wallets-password .input-content.active { z-index: -99; }
github地址:https://github.com/fiveTree/-_-
源码下载地址:http://xiazai.jb51.net/201706/yuanma/master(jb51.net).rar
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
- 萌新刷题(十二)二叉树的前序遍历
- 轻松掌握ES6中集合Set的用法
- 萌新刷题(十三)买卖股票的最佳时机
- 萌新刷题(十一)有效数字
- Hive性能优化统计每日IP CREATE TABLE ip_2014_12_29 AS SELECT COUNT(DISTINCT ip) AS IP FROM logdfs WHERE logda
- 算法中描述复杂度的大O是什么意思?
- 优化Mysql:3个简单的调整
- Redis的5个常见应用场景
- Mysql 索引你了解多少?
- Mysql 8 新特性 window functions 有什么用?
- 用两张图告诉你,为什么你的App会卡顿?
- MapReduce设计模式
- 一个Sqrt函数引发的血案
- 小程序优秀开发资源
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在Docker中运行PostgreSQL + pgAdmin 4
- .Net Core微服务入门全纪录(六)——EventBus-事件总线
- SVN提交时强制用户写日志
- Apache vhost配置
- win10使用WSL 2运行Docker Desktop,运行文件从C盘迁移到其他目录
- htaccess简介和16个小技巧
- Nginx禁止指定目录运行PHP脚本
- 机器学习数学笔记|偏度与峰度及其 python 实现
- ABP(ASP.NET Boilerplate Project)快速入门
- IdentityServer4 4.x版本 配置Scope的正确姿势
- 个人总结的部分数据验证规则
- 一句话实现php日期转中文汉字
- .Net Core微服务入门全纪录(八)——Docker Compose与容器网络
- PHP中少用但是很好用的方法
- 使用一维数据构造简单卷积神经网络