微信小程序 密码键盘 - 密码页面组件 (原生小程序代码)
1.WXML页面
<view>
<!--<section class="mask" catchtap="canclePwd" wx:if="{{inputPwd}}"></section>-->
<section class="pwd-modal" catchtap="getFocus" >
<!-- <p class="close">X</p> -->
<!--<p class="title">输入查看密码</p>-->
<ul>
<li><i class="circle" wx:if="{{password.length >= 1}}"></i></li>
<li><i class="circle" wx:if="{{password.length >= 2}}"></i></li>
<li><i class="circle" wx:if="{{password.length >= 3}}"></i></li>
<li><i class="circle" wx:if="{{password.length >= 4}}"></i></li>
<li><i class="circle" wx:if="{{password.length >= 5}}"></i></li>
<li><i class="circle" wx:if="{{password.length >= 6}}"></i></li>
</ul>
<input ref="inputs" focus="{{isFocus}}" type="number" maxlength="6" bindinput="pwd" value="{{password}}"/>
</section> <view class="submit" bindtap="submit">确定</view>
</view>
2.WXSS
.mask {
position: fixed;
top: 0;
left: 0;
min-height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 10;
} .pwd-modal {
/*position: fixed;*/
/*top: 258rpx;*/
/*left: 54rpx;*/
/*right: 54rpx;*/
/*height: 504rpx;*/
padding-top: 50rpx;
background: white;
z-index: 99;
border-radius: 8rpx;
text-align: center;
} ul {
display: flex;
margin: 94rpx 38rpx 104rpx;
}
.submit{
position: fixed;
bottom: 0;
left: 0;
right: 0;
height:98rpx;
background:rgba(253,49,49,1);
box-shadow:0px -4px 6px 0px rgba(0,0,0,0.02);
color: #FFFFFF;
text-align: center;
line-height: 98rpx;
color: #FFFFFF;
font-size: 34rpx;
}
ul li {
width: 100%;
height: 96rpx;
line-height: 94rpx;
border: 1rpx solid #ececeb;
border-right: 0 none;
box-sizing: border-box;
text-align: center;
font-size: 0;
} ul li:last-of-type {
border-right: 1rpx solid #ececeb;
} ul li .circle {
display: inline-block;
vertical-align: middle;
width: 50rpx;
height: 50rpx;
border-radius: 50%;
background: black;
} input {
text-indent: -9999rpx;
margin-left: -9999rpx;
opacity: 0;
}
3.JS
//index.js
//获取应用实例
const app = getApp() Page({
data: {
password: '',
isFocus: false,
inputPwd: true,
inputNum: 0,
passwordFirst: '',
passwordTwo: '',
},
pwd(e) {
console.log(666)
console.log(e.detail.value)
console.log(666)
let reg = /[^\d]/g
let mobile = e.detail.value.replace(reg, '')
this.setData({
password: mobile
})
return mobile
},
getFocus() {
this.setData({
isFocus: true
})
},
onLoad: function () {
console.log(this.data.password.length)
},
submit(){
let that = this
if (that.data.password.length == 6) {
if (that.data.inputNum == 0) {
that.data.passwordFirst = that.data.password
that.data.inputNum = 1
wx.setNavigationBarTitle({
title: '再次输入密码',
})
that.setData({
password: '',
isFocus: false,
inputPwd: true,
})
} else if (that.data.inputNum == 1){
that.data.passwordTwo = that.data.password
if (that.data.passwordFirst == that.data.passwordTwo) {
// 传that.data.passwordTwo为支付密码
wx.showToast({
title: '设置成功',
icon: 'success',
success: function (res) {
wx.navigateBack({
delta: 1
})
}
}) } else {
wx.showToast({
title: '两次输入密码不同,请重新输入',
icon: 'none',
})
wx.setNavigationBarTitle({
title: '设置支付密码',
})
that.setData({
password: '',
isFocus: false,
inputPwd: true,
inputNum: 0,
passwordFirst: '',
passwordTwo: ''
})
return false
}
}
}
}, })
微信小程序 密码键盘 - 密码页面组件 (原生小程序代码)的更多相关文章
- 微信小程序富文本渲染组件html2wxml及html2wxml代码块格式化在ios下字体过大问题
1.组件使用: 之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:http ...
- 微信小程序开发 [02] 页面注册和基本组件
1.页面注册 既然我们希望跳转到新的页面,那自然要新建页面相关的文件才行.在开篇已经讲过,一个小程序页面由四个文件组成,假如我们的页面名为welcome,那么这四个文件则是: welcome.js w ...
- 微信小程序 基本介绍及组件
创建项目 微信开发工具深入介绍 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html 基本项目目录 1. 配置 ...
- 微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中 页面的 title 只支持纯文本级别的样式控 ...
- 微信小程序开发—快速掌握组件及API的方法
微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...
- 微信小程序开发—快速掌握组件及API的方法---转载
微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...
- [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext
引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...
- 微信小程序详解——页面之间的跳转方式【路由】和参数传递
微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能.今天我们来研究小程序页面之间的跳转方式. 1.先导 在Andr ...
- 完整微信小程序授权登录页面教程
完整微信小程序授权登录页面教程 1.前言 微信官方对getUserInfo接口做了修改,授权窗口无法直接弹出,而取而代之是需要创建一个button,将其open-type属性绑定getUseInfo方 ...
随机推荐
- 转:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述
原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...
- ext 的loadmask 与ajax的同步请求水火不容
由于ajax 的同步请求会有一段请求时间.有的短.有的长,对于短的我们还是能接受的,不过长的话就必须处理一下了, 就比如处于ext 4.2.0的框架下,需要一个遮掩的样式,框架是有自带的,loadma ...
- Centos7下安装Docker(详细的新手装逼教程)
早就听说过Docker,一直不清楚是个啥,今天捣鼓了一下,这里做个记录. --------------------------------------------------------------- ...
- JDK 1.8源码阅读 LinkList
一,前言 LinkedList是一个实现了List接口和Deque接口的双端链表.有关索引的操作可能从链表头开始遍历到链表尾部,也可能从尾部遍历到链表头部,这取决于看索引更靠近哪一端. LinkedL ...
- 深入理解Java虚拟机5-chap7-斗者2星
一.类加载机制 1.类加载机制:虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Class文件加载到内存,这就是类加载机制. 2.类型 ...
- react native出现 undefined is not a function_this4.错误函数无法识别
该函数可能里可能有this,的上个函数this要绑定bind(this)
- nuxtjs中修改head及vuex的使用
1.在之前vue项目中,我们如果需要改变每个页面的title,是需要在路由里配置meta然后通过路由守卫将每个页面的title替换掉,但是在nuxtjs中他提供了一个方法,直接在每个.vue的文件中使 ...
- 实现html页面自动刷新的几种方式
自动页面刷新通常会用在对数据的实时性比较敏感的网站中,比如股票走势等,另外在普通的页面自动跳转中也会使用到页面自动刷新技术. 页面刷新我见过的有三种方式,下面来一一说明 1.通过在<head&g ...
- Python之socket_tcp
1.1socket编程之tcp编程 """ socket类型 sock_stream 面向连接的流套接字,默认值 tcp协议 sock_dgram 无连接的数据报文套接字 ...
- centos7安装zabbix3.0超详细步骤解析
centos7安装zabbix3.0超详细步骤解析 很详细,感谢作者 以下是我操作的history 622 java -version 623 javac -version 624 grep SELI ...