当前位置：网站首页>微信小程序密码显示隐藏（小眼睛）

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

2022-07-17 05:09:00 【一指流沙q】

一、效果图

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

二、代码

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'
      })
    }

  }

})