E企盈营销工具技术服务商 热线:4006-838-530

微信小程序:实现密码的可见与隐藏功能(真机有效)

E企盈直播平台营销卖货系统

像常见的app在注册,登录的时候会有输入密码的一项,通常又分为密码可见与不可见之分,微信小程序也存在这一的需求,刚开始的思路是利用input的type属性text和password来切换状态,但在真机上测试时ios上存在问题。后面改为用两个input来实现。页面布局如下 view class=”content flex”            view class=”img”                image src=”../../images/password_login.png” style=”width:30rpx;height:38rpx;” mode=”aspectFit”/image            /view            view class=”input”                input wx:if=”{{!isShow1}}” placeholder=”请输入新密码” @input=”newPass”  value=”{{newPassword}}” type=”text” maxlength=”16″/input                input wx:else placeholder=”请输入新密码” @input=”hideNewPass” value=”{{newPassword}}” type=”password” maxlength=”16″/input            /view            view class=”see”                image class=”” @tap=”showNewPsd1″ src=”{{isShow1?’../../images/nosee.png’:’../../images/see.png’}}” style=”width:40rpx;height:23rpx” mode=”aspectFit”/image            /view        /view左中右布局方式   中间放了两个input,一个是type=“text”,用来放输入时可见的,另一个是type=“password”,用来放隐藏密码的。在点击右边小眼睛图标的时候切换这两个状态。js逻辑用的是小程序wepy框架,this.isShow=true等价为this.setData({isShow:true});this.$apply()用来检查数据变化,wepy自带。原生不用。data={        isShow1:true,        inputType1:”password”,        newPassword:””,    }     methods={      //输入新密码        newPass(e){            this.newPassword=e.detail.value;            this.$apply();        },        //输入新密码        hideNewPass(e){            this.newPassword=e.detail.value;            this.$apply();        },     //点击小眼睛图标showNewPsd1(){            if(this.isShow1){                this.isShow1=false;                this.inputType1=”text”;                this.$apply();            }else{                this.isShow1=true;                this.inputType1=”password”;                this.$apply();            }        },}功能简单,欢迎指出文档中的错误。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序:实现密码的可见与隐藏功能(真机有效)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏