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

像常见的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();
            }
        },
	}

功能简单，欢迎指出文档中的错误。