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