在微信小程序里，实现点击框里的眼睛图标时密码显示与隐藏切换

大家自己脑补一下，就是当你输入QQ密码时的一些展示和操作
具体看代码，亲测真机模拟有效（具体看GIF）
还有还有，一开始想的用type，但网上都说真机不成功，所以也就不试了，下面这种方法也是借鉴CSDN上的大佬。跪谢！！！
分享给有需要的朋友们

wxml

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

wxss

.parentstyle {display: flex;align-items: center;border: 1rpx solid #e0e0e0;border-radius: 10rpx;box-shadow: 0 0 5rpx #e0e0e0;margin: 30rpx 38px;padding: 20rpx;
}.parentstyle .imageStyle {width: 41rpx;height: 41rpx;margin-right: 20rpx;
}.parentstyle .centerStyle {display: flex;flex: 1;align-items: center;justify-content: space-between;font-size: 28rpx;
}

Page({data: {defaultType: true,passwordType: true},//defaultType：眼睛状态   passwordType：密码可见与否状态eyeStatus: function(){this.data.defaultType= !this.data.defaultTypethis.data.passwordType= !this.data.passwordTypethis.setData({defaultType: this.data.defaultType,passwordType: this.data.passwordType})}})

在微信小程序里，实现点击框里的眼睛图标时密码显示与隐藏切换相关推荐

微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{ ...
微信小程序：想要点击图片时进行一个放大的功能，写完之后可以正常显示，但点击时图片加载不出来，在此想问一下各路大神有没有解决办法
微信小程序:想要点击图片时进行一个放大的功能,写完之后可以正常显示,但点击时图片加载不出来,在此想问一下各路大神有没有解决办法 wxml: 在这里插入代码片 <view class='zhanp ...
c语言代码游戏跳一跳,微信小程序《跳一跳》游戏里的编程小知识，你知道吗？...
微信小程序<跳一跳>游戏里的编程小知识,你知道吗? 今日你跳了吗? 玩过的朋友都知道,跳一跳里的游戏操作非常简单,就用手指按住屏幕按住施放进行跳跃,整个游戏是个人都可以很轻松玩起来! 游戏 ...
微信小程序之toast等弹框提示
微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT). 看下有关参数说明: 代码很简单: wx.showToast({title: '成功' ...
【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二]  <view><button style="margin-top: 300px;" ...
微信小程序之select下拉框
wxml: <view class="classify-kuangjia"><view class="classify-kuangjia2"& ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用
微信小程序.uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用安装iconfont-tools npm i -g iconfont-tools 全局安装工具下 ...

在微信小程序里，实现点击框里的眼睛图标时密码显示与隐藏切换

在微信小程序里，实现点击框里的眼睛图标时密码显示与隐藏切换相关推荐

最新文章

热门文章