微信小程序 - 密码的可见与不可见

无聊的时候打打基础，有事儿的时候扛扛怪兽 ~

通显效果

前情提要

如果你没有以下的诉求、问题，你可以直接关闭界面了 - - ~

诉求

• 动态切换input 类型，一般在 password 与 text 俩者之间切换
• 眼睛的关闭与打开，对应的密码是否可见

问题

• type类型切换了，模拟器运行效果无错！ 真机运行效果无效！！！

缺陷版

这个版本网上是最常见的版本 ~

缺陷：动态完成了input 类型切换,运行效果在工具自带模拟器操作显示是没有问题的，但是真机上存在问题 - -

.wxml

  <view class='parentstyle'>
      <view class='centerStyle'>
        <input bindinput="inputPwd" maxlength="20" type='{{typeStatus}}' placeholder="请输入密码" style='font-size:34rpx'></input>
        <image src='{{defaultType? "../../images/eye_close.png": "../../images/eye_open.png"}}' class='imageStyle' bindtap='eyeStatus'></image>
      </view>
  </view>

.wxss

.parentstyle {
  margin-left: 38rpx;
  margin-top: 30rpx;
  margin-right: 38rpx;
}

.centerStyle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    defaultType: true,
    typeStatus: 'text'
  },
	//密码type切换
   eyeStatus: function() {
    if (this.data.defaultType) {
      this.setData({
        defaultType: false,
        typeStatus: 'passwrod'
      })
    } else {
      this.setData({
        defaultType: true,
        typeStatus: 'text'
      })
    }
  },
})

完美版

注意 ：之所以导致模拟器有效，真机无效的主要原因在于我们找错了方向！

这里我们删除了type的属性！→→→→→→→→→→→→ 取而代之在的是 password 属性 ！！！

.wxml

  <view class='parentstyle '>
    <view class='centerStyle'>
      <input bindinput="inputPwd" password='{{passwordType}}' maxlength="20" placeholder="请输入密码" style='font-size:34rpx'></input>
      <image src='{{defaultType? "../../images/eye_close.png": "../../images/eye_open.png"}}' class='imageStyle' bindtap='eyeStatus'></image>
    </view>
    <view class='line_style'></view>
  </view>

.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    defaultType: true,
    passwordType: true
  },
  //defaultType：眼睛状态   passwordType：密码可见与否状态
  eyeStatus: function() {
    if (this.data.defaultType) {
      this.setData({
        passwordType: false,
        defaultType: false,
      })
    } else {
      this.setData({
        passwordType: true,
        defaultType: true,
      })
    }
  },
}）