微信小程序密码显示隐藏（小眼睛）

一、效果图

微信小程序密码显示隐藏（小眼睛）

二、代码 

wxml 

<view>
  <input type="text" password="{{pwdtype}}" />
  <image src="{{image}}" mode="aspectFit" bindtap="goto"></image>
</view>

wxss 

view {
  display: flex;
  justify-content: center;
}

input {
  width: 50%;
  border-bottom: 1px solid black;
}

image {
  width: 48rpx;
  height: 48rpx;
  /* border: 1px solid black; */

}

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    pwdtype: true,
    image: '/images/眼睛_隐藏_o.png'

  },
  goto() {
    if (this.data.pwdtype == true) {
      this.setData({
        pwdtype: false,
        image: '/images/眼睛_显示_o.png'
      })
    } else {
      this.setData({
        pwdtype: true,
        image: '/images/眼睛_隐藏_o.png'
      })
    }

  }

})

注意：图片路径不能带中文，否则真机不能调试

图片下载地址：iconfont-阿里巴巴矢量图标库