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

一指流沙q

已于 2022-07-17 11:02:04 修改

阅读量2.2k

点赞数 4

分类专栏：微信小程序文章标签：微信小程序

于 2022-07-16 21:46:24 首次发布

本文链接：https://blog.csdn.net/qq_51165234/article/details/125825423

版权

微信小程序专栏收录该内容

12 篇文章 6 订阅

订阅专栏

该博客介绍了如何在微信小程序中实现输入框密码显示与隐藏的功能，通过点击小眼睛图标切换密码可见状态。示例代码包括WXML、WXSS和JS部分，详细展示了输入框和小眼睛图标的交互逻辑。注意图片路径避免使用中文以确保真机调试正常。

摘要由CSDN通过智能技术生成

一、效果图

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

二、代码

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

  }

})