微信小程序实现密码显示与隐藏的睁眼闭眼功能

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 密码框type值
    inputType:"password",
    // 是否显示密码
    show_pass:false,
    ...
  }
  ...
})

 <text class="page-flex-password">设置密码</text>
     <view class="page-flex-row3">
      <input  name="password" class="page-input2" placeholder-class="place-holder"  placeholder="请输入您要设置的密码（6-12位）" type="{{inputType}}"></input>
      <image class="password-icon" src="/images/register/yj_01.png" bindtap="seeTap" wx:if="{{show_pass}}"/>
      <image class="password1-icon" src="/images/register/biyan.png" bindtap="seeTap" wx:else/>
    </view>

seeTap:function(){
    var newType = this.data.inputType=='password'?'text':'password';
    this.setData({
      // 切换图标
      show_pass:!that.data.show_pass,
      // 切换表单type属性
      inputType:newType,
    })
  },

Page({
  /**
   * 页面的初始数据
   */
  data: {
    //是否密码框
    passwordType:true,
    // 是否显示密码
    show_pass:false,
    ...
  }
  ...
})

<text class="page-flex-password">设置密码</text>
     <view class="page-flex-row3">
      <input  name="password" class="page-input2" placeholder-class="place-holder"  placeholder="请输入您要设置的密码（6-12位）" password='{{passwordType}}'></input>
      <image class="password-icon" src="/images/register/yj_01.png" bindtap="seeTap" wx:if="{{show_pass}}"/>
      <image class="password1-icon" src="/images/register/biyan.png" bindtap="seeTap" wx:else/>
    </view>

seeTap:function(){
    that.setData({
      // 切换图标
      show_pass:!that.data.show_pass,
      // 切换是否密码框
      passwordType:!that.data.passwordType,
    })
  },