uniapp自定义密码输入键盘-数字键盘效果demoUI方法一(整理)
2023-09-14 09:04:05 时间
效果图:
<template>
<view class="paymentCodeBox">
<!-- 自定义键盘 -->
<view class="password-set-page">
<view class="setPage">
<view class="font-size30 color222 hites align-center">请输入6位纯数字支付密码</view>
<view class="code margin-top40 margin-bottom110">
<view class="numFont">
<view v-for="(item, index) in 6" :key="index">{{ password[index] && '●' || '' }}</view>
</view>
</view>
<view class="nextStep margin-left30 margin-right30 font-size30 color height100 align-center" @click="nextStepClick()">下一步</view>
<view class="keyboard">
<button v-for="(item, index) in 9" :key="index" @click="key(index + 1)">
<text>{{ index + 1 }}</text>
</button>
<button class="hide"></button>
<button @click="key(0)">
<text>0</text>
</button>
<button @click="del()">
<image src="../static/goods/del1.png" mode="aspectFill"></image>
</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
// pageNum: 1,
password: '',
}
},
// 页面加载
onLoad(e) {
uni.hideTabBar(); //不让底部显示tab选项
},
// 页面显示
onShow() {
},
// 方法
methods: {
// 点击下一步
nextStepClick(){
this.$.back()
},
// 键盘
key(key) {
if (this.password.length < 6) {
this.password += key
if (this.password.length === 6) {
// 密码验证操作
console.log(this.password,'37')
// this.$.open('/trait/details');
}
}
},
del() {
if (this.password.length > 0) {
this.password = this.password.substring(0, this.password.length - 1)
}
},
//获取列表数据
getListData() {
this.$.ajax("POST", "/xxxxx/xxxxx", {
page: this.pageNum,
}, (res) => {
if (res) {
if (this.pageNum == 1) {
this.list = res.data
} else {
this.list = this.list.concat(res.data)
if (res.data.length === 0) {
this.pageNum--
}
}
}
uni.stopPullDownRefresh()
});
}
},
// 计算属性
computed: {
},
// 侦听器
watch: {
},
// 页面隐藏
onHide() {
},
// 页面卸载
onUnload() {
},
// 触发下拉刷新
onPullDownRefresh() {
// this.pageNum = 1
// this.getListData()
},
// 页面上拉触底事件的处理函数
onReachBottom() {
// this.pageNum++
// this.getListData()
},
}
</script>
<style lang="scss" scoped>
.paymentCodeBox {
width: 100%;
height: 100vh;
background: #fff;
.password-set-page {
width: 100%;
height: 100vh;
.setPage{
background: #fff;
border-radius: 20rpx 20rpx 0px 0px;
.hites{
padding-top: 61rpx;
}
}
.nextStep{
background: #F21177;
border-radius: 20rpx;
line-height: 100rpx;
}
.code {
view {
// border: 1rpx solid #D9D9D9;
border-radius: 8rpx;
overflow: hidden;
display: flex;
width: 690rpx;
margin: 0 auto;
view {
display: flex;
align-items: center;
justify-content: center;
// width: 100rpx;
height: 100rpx;
// background: #FAFAFA;
font-size: 60rpx;
border: 1rpx solid #D9D9D9;
&:not(:last-child) {
border-right: 1rpx solid #D9D9D9;
}
}
}
}
.keyboard {
position: fixed;
bottom: 0;
width: 100%;
background: #EEEEEE;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
button {
display: flex;
align-items: center;
justify-content: center;
width: calc(100vw / 3 - 1rpx);
background: #FFFFFF;
border-radius: 0;
margin-top: 1rpx;
font-size: 50rpx;
height: 120rpx;
&.button-hover:not(.hide) {
background: #EEEEEE;
}
image {
width: 52rpx;
height: 38rpx;
}
}
}
}
}
</style>
相关文章
- 四种在MySQL中修改root密码的方法
- 如何提升Oracle用户密码安全性的策略方法
- Linux 中不输入密码运行 sudo 命令的方法
- PostgreSQL 实现登录及修改密码操作
- Mac系统重置PostgreSQL密码的方法示例代码
- Linux系统下的密码修改方法(修改密码linux)
- MySQL实现修改Root密码的方法(mysql修改root密码)
- 查看Linux终端密码的方法(linux显示密码)
- MySQL新建密码输入错误的解决方法(mysql新建密码错误)
- 查看MySQL数据库的密码方法(查看mysql的密码)
- Linux下简便安全的交互输入密码方法(linux交互输入密码)
- 太多解决Oracle密码错误次数过多的方法(oracle密码错误次数)
- 解决MySQL忘记用户密码的方法(mysql忘记用户密码)
- 密码Linux登录系统:用户名及密码设置(linux登系统用户名)
- MySQL密码过期解决方法(mysql密码过期)
- Oracle数据库修改密码技巧(oracle如何修改密码)
- 如何修改su oracle用户的密码?(suoracle密码)
- 的密码MSSQL密码设置指南(如何设置mssql)
- 掌握redis小技巧精准获取密码(获取redis密码)
- Redis密码修改新安全,新体验(如果redis修改了密码)
- MySQL数据库忘记密码试试这个方法(mysql下忘记密码)
- Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)