微信小程序-输入密码

wxml

<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>

wxss

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;
}

wxjs

data: {
payment_mode: 1,//默认支付方式 微信支付
isFocus: false,//控制input 聚焦
balance:100,//余额
actual_fee:20,//待支付
wallets_password_flag:false//密码输入遮罩
},
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)
 
                 
                邀请 
              
 
               
              
 
            
             
                        
 
              




路过




雷人




握手




鲜花




鸡蛋






 
            

            
 
            

                  原作者: 模板之家 
                  来自: 网络收集 
                   
                   
                              
                        
          
          

  
      
  
  	

上一篇：微信小程序录音与播放录音
下一篇：微信小程序canvas绘制坐标图
  
        
      
      

    
       
       
      

  	

       
全部回复(0)
            
  
 
    
     
     
    

        
      
  


        

    

     






                
           
    
    
    
    

   
    
         

    
     
        
  
 
  

            
相关分类

小程序开发
php教程
mysql教程
js教程
服务器运维
经验杂谈
linux命令



    

  

    

      
      推荐阅读
  
  

    

      

          

            

              

            
            mysql分页操作
        

          

            

              

            
            update是什么关键字
        

          

            

              

            
            MySQL错误1171如何解决
        

          

            

              

            
            深入理解MySQL数据类型：探索基本数据类型的细节和限制
        

          

            

              

            
            快速掌握MySQL常用数据类型：常见数据类型及其应用场景一览
        

          

            

              

            
            了解MySQL的主要数据类型：熟悉常用的数据类型有哪些
        
    
  

    
 
      
 
    
  



 
  
 


 

 

     




    

        
首页
        
分类
        

                
索引
                
我的
            




  

  

    

      
Copyright © Comsenz Inc. Powered by Discuz!X3.5 


 蜀ICP备12013697号 
    
    

       
 微信：xu08290201   QQ：75283535 
    
  
  
 

 



 
 



 

 
 
 

 
 

 

 

 

 

 



  


 
 
返回顶部