微信小程序如何在输入框中设置眼睛

在微信小程序里，设置密码输入框。
非常感谢分享。
原文链接：https://blog.csdn.net/weixin_45727040/article/details/106501412

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

微信小程序如何在输入框中设置眼睛相关推荐

微信小程序尺寸及外边距设置调整技巧
微信小程序尺寸已经是当下微信小程序设计最热门的话题,下面将从多方面来谈谈微信小程序尺寸及外边距设置相关的内容. 一:尺寸(Dimension) 一.尺寸属性:允许控制元素的宽和高,还可以设置行间距. ...
微信小程序资料集（中）
**12月1日小程序Demo集合** [微信小程序Demo:金融理财计算器](简书) [微信小程序Demo:支付宝+微信二维码收款小程序](简书) [上滑导航吸顶效果](简书) [微信小程序Demo: ...
微信小程序开发之wxss中的那些事（一）
微信小程序开发之wxss中的那些事微信小程序开发中,页面的布局怎么整? 啥是WXSS? 基本语法什么是rpx 什么是 flex 微信小程序开发中,页面的布局怎么整? 各位道友请留步,如果你是新手, ...
微信小程序开发教程5：设置全局css样式
平凡也就两个字: 懒和惰; 成功也就两个字: 苦和勤; 优秀也就两个字: 你和我. 跟着我从0学习JAVA.spring全家桶和linux运维等知识,带你从懵懂少年走向人生巅峰,迎娶白富美! 关注微信 ...
微信小程序云开发CMS中WebHook功能的使用方法
微信小程序云开发CMS中WebHook功能的使用方法官方文档 Webhook 是什么呢,翻译过来就是网页钩子.它的用处是,当我们在CMS进行增添查改的操作后,会自动回调webhook函数,我们就可以 ...
微信小程序navigationBarTitleText导航栏标题设置
微信小程序navigationBarTitleText导航栏标题设置全局设置 app.json "window": { "navigationBarTextStyle& ...
微信小程序的 .wxml文件中如何加入多个空格
微信小程序的 .wxml文件中如何加入空格一.直接按空格键二.使用不换行空格 ` ` 一.直接按空格键注意:连续多个空格被视为一个空格代码演示: <text> 你好按了一次空格键 ...
微信小程序first-child 和 last-child 失效,设置后不起作用~
微信小程序first-child 和 last-child 失效,设置后不起作用~ 问题:在不确定有多少个子项的前提下,需要给最后一个子项添加一个样式. 使用了last-child不生效. 解决办法: ...
微信小程序获取app.js中的公共数据
微信小程序获取app.js中的公共数据小程序项目结构如下 app.js App({list: [{id: 1,name: '完美型',content: "属于第一型的你,相信常常这感觉,对 ...

微信小程序如何在输入框中设置眼睛

微信小程序如何在输入框中设置眼睛相关推荐

最新文章

热门文章