设计支付密码的输入框
效果如下:
<>强实例代码:
& lt;视图类=爸Ц丁北?
& lt;视图类="标题"祝辞支付方式& lt;/view>
& lt;视图catchtap=皐x_pay”class=皐x_pay”比;
& lt;我class="图标{{payment_mode==1 & # 63;“活跃”:“}}”类型=白址弊４? lt;/i>
& lt; text>微信支付& lt;/text>
& lt;/view>
& lt;视图catchtap=皁ffline_pay”class=皁ffline_pay”比;
& lt;我class="图标{{payment_mode==0 & # 63;“活跃”:“}}”类型=白址弊４? lt;/i>
& lt; text>对公打款& lt;/text>
& lt;/view>
& lt;块wx:如果="{{平衡!=0}}”在
& lt;视图catchtap=皐allet_pay”class=皐allet_pay”比;
& lt;我class="图标{{payment_mode==2 & # 63;“活跃”:“}}”类型=白址弊４? lt;/i>
& lt; text>钱包支付(余额:{{平衡/100}}元)& lt;/text>
& lt;/view>
& lt;/block>
& lt;块wx:如果="{平衡=={0}}”在
& lt;视图类=皐allet_pay”比;
& lt;我类=巴急辍崩嘈?白址弊４? lt;/i>
& lt;文本在钱包支付(余额不足)& lt;/text>
& lt;/view>
& lt;/block>
& lt;/view>
& lt;视图catchtap=爸Ц丁崩?罢取弊４侨范? lt;/view>
& lt; !——输入钱包密码——比;
& lt;查看天气:如果=" {{wallets_password_flag}}”类=皐allets-password”比;
& lt;视图类=癷nput-content-wrap”比;
& lt;视图类=岸ゼ丁北?
& lt;视图catchtap=癱lose_wallets_password”class=肮乇铡弊４恰? lt;/view>
& lt;视图类="三"祝辞请输入支付密码& lt;/view>
& lt;视图catchtap=癿odify_password”类=巴恰弊４峭敲苈? lt;/view>
& lt;/view>
& lt;视图类=癮ctual_fee”比;
& lt; span>￥& lt;/span>
& lt; text> {{actual_fee/100}} & lt;/text>
& lt;/view>
& lt;视图catchtap=皊et_Focus”class=癷nput-password-wrap”比;
& lt;视图类=皃assword_dot”比;
& lt;我的天气:如果=" {{wallets_password.length>=1}}”祝辞& lt;/i>
& lt;/view>
& lt;视图类=皃assword_dot”比;
& lt;我的天气:如果=" {{wallets_password.length>=2}}”祝辞& lt;/i>
& lt;/view>
& lt;视图类=皃assword_dot”比;
& lt;我的天气:如果=" {{wallets_password.length>=3}}”祝辞& lt;/i>
& lt;/view>
& lt;视图类=皃assword_dot”比;
& lt;我的天气:如果=" {{wallets_password.length>=4}}”祝辞& lt;/i>
& lt;/view>
& lt;视图类=皃assword_dot”比;
& lt;我的天气:如果=" {{wallets_password.length>=5}}”祝辞& lt;/i>
& lt;/view>
& lt;视图类=皃assword_dot”比;
& lt;我的天气:如果=" {{wallets_password.length>=6}}”祝辞& lt;/i>
& lt;/view>
& lt;/view>
& lt;/view>
& lt;输入bindinput=皊et_wallets_password”class=笆淙肽谌荨泵苈肜嘈?笆帧弊ㄗ?" {{isFocus}} "最大长度=?”/比;
& lt;/view>
之前
<强> index.js
页面({
数据:{
payment_mode: 1、//默认支付方式微信支付
isFocus:假的,//控制输入聚焦
平衡:100//余额//待actual_fee: 20日支付
wallets_password_flag:假//密码输入遮罩
},//事件处理函数>
页面{
高度:100%;
宽度:100%;
背景:# e8e8e8;
}
页面.pay {
显示:flex;
flex-direction:列;
背景:# fff;
}
页面.pay .title {
身高:90 rpx;
行高:90 rpx;
字体大小:28 rpx;
颜色:# 353535;
填充:0 23 rpx;
边界底部:1 rpx固体# ddd;
box-sizing: border-box;
}
页面.pay .wx_pay、页面.pay .offline_pay、页面.pay .wallet_pay {
保证金:0 26 rpx;
身高:90 rpx;
行高:90 rpx;
边界底部:2 rpx固体# ddd;
box-sizing: border-box;
显示:flex;
对齐项目:中心;
justify-content: flex-start;
}
页面.pay .wx_pay .icon、页面.pay .offline_pay .icon,
页面.pay .wallet_pay .icon {
宽度:34 rpx;
高度:34 rpx;
边界:2 rpx固体# ddd;
box-sizing: border-box;
这个特性:50%;
}
页面.pay .wx_pay .icon。活跃,页面.pay .offline_pay .icon.active,
页面.pay .wallet_pay .icon。活跃的{
边界:10 rpx固体# 00 a2ff;
}
页面.pay .wx_pay文本页面.pay .offline_pay文本页面.pay .wallet_pay文本{
margin-left: 20 rpx;
颜色:# 353535;
字体大小:26 rpx;
}
页面.pay .wallet_pay {
边界:0;
border-top: 2 rpx固体# ddd;
}
页面.pay .offline_pay {
边界:0;
}
页面.save {
保证金:80 rpx 23 rpx;
颜色:# fff;
背景:# 00 a2ff;
身高:88 rpx;
行高:88 rpx;
text-align:中心;
字体大小:30 rpx;
border - radius: 10 rpx;
}
页面.wallets-password {
位置:绝对的;
左:0;
上图:0;
宽度:100%;
高度:100%;
背景:rgba (0, 0, 0, 0.6);
}
页面.wallets-password .input-content-wrap {
位置:绝对的;
上图:200年rpx;
左:50%;
显示:flex;
flex-direction:列;
宽度:600 rpx;
margin-left: -300 rpx;
背景:# fff;
border - radius: 20 rpx;
}
直页面.wallets-password .input-content-wrap上{
显示:flex;
对齐项目:中心;
身高:90 rpx;
边界底部:2 rpx固体# ddd;
justify-content:空间;
}
直页面.wallets-password .input-content-wrap上.close {
字体大小:44 rpx;
颜色:# 999;
粗细:100;
}
直页面.wallets-password .input-content-wrap上.forget {
颜色:# 00 a2ff;
字体大小:22 rpx;
}
页面.wallets-password .input-content-wrap .actual_fee {
显示:flex;
对齐项目:中心;
justify-content:中心;
颜色:# 000;
身高:100 rpx;
保证金:0 23 rpx;
边界底部:2 rpx固体# ddd;
}
页面.wallets-password .input-content-wrap .actual_fee跨度{
字体大小:24 rpx;
}
页面.wallets-password .input-content-wrap .actual_fee文本{
字体大小:36 rpx;
}
页面.wallets-password .input-content-wrap .input-password-wrap {
显示:flex;
对齐项目:中心;
justify-content:中心;
身高:150 rpx;
}
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
