1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 在微信小程序里 实现点击框里的眼睛图标时密码显示与隐藏切换

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

时间:2019-08-30 15:18:59

相关推荐

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

大家自己脑补一下,就是当你输入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;}

js

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。