One 、 design sketch

Wechat applet password display and hiding （ Little eyes ）

Two 、 Code  

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({

  /**
   *  Initial data of the page 
   */
  data: {
    pwdtype: true,
    image: '/images/ eyes _ hide _o.png'

  },
  goto() {
    if (this.data.pwdtype == true) {
      this.setData({
        pwdtype: false,
        image: '/images/ eyes _ Show _o.png'
      })
    } else {
      this.setData({
        pwdtype: true,
        image: '/images/ eyes _ hide _o.png'
      })
    }

  }

})

Be careful ： Real machine test cannot be used

Image download address ：iconfont- Alibaba vector icon library