无聊的时候打打基础,有事儿的时候扛扛怪兽 ~
通显效果
前情提要
如果你没有以下的诉求、问题,你可以直接关闭界面了 - - ~
诉求
- 动态切换input 类型,一般在 password 与 text 俩者之间切换
- 眼睛的关闭与打开,对应的密码是否可见
问题
- type类型切换了,模拟器运行效果无错! 真机运行效果无效!!!
缺陷版
这个版本网上是最常见的版本 ~
缺陷:动态完成了input 类型切换,运行效果在工具自带模拟器操作显示是没有问题的,但是真机上存在问题 - -
.wxml
<view class='parentstyle'>
<view class='centerStyle'>
<input bindinput="inputPwd" maxlength="20" type='{{typeStatus}}' placeholder="请输入密码" style='font-size:34rpx'></input>
<image src='{{defaultType? "../../images/eye_close.png": "../../images/eye_open.png"}}' class='imageStyle' bindtap='eyeStatus'></image>
</view>
</view>
.wxss
.parentstyle {
margin-left: 38rpx;
margin-top: 30rpx;
margin-right: 38rpx;
}
.centerStyle {
display: flex;
align-items: center;
justify-content: space-between;
}
.js
Page({
/**
* 页面的初始数据
*/
data: {
defaultType: true,
typeStatus: 'text'
},
//密码type切换
eyeStatus: function() {
if (this.data.defaultType) {
this.setData({
defaultType: false,
typeStatus: 'passwrod'
})
} else {
this.setData({
defaultType: true,
typeStatus: 'text'
})
}
},
})
完美版
注意 :之所以导致模拟器有效,真机无效的主要原因在于我们找错了方向!
这里我们删除了type的属性!→→→→→→→→→→→→ 取而代之在的是 password 属性 !!!
.wxml
<view class='parentstyle '>
<view class='centerStyle'>
<input bindinput="inputPwd" password='{{passwordType}}' maxlength="20" placeholder="请输入密码" style='font-size:34rpx'></input>
<image src='{{defaultType? "../../images/eye_close.png": "../../images/eye_open.png"}}' class='imageStyle' bindtap='eyeStatus'></image>
</view>
<view class='line_style'></view>
</view>
.js
Page({
/**
* 页面的初始数据
*/
data: {
defaultType: true,
passwordType: true
},
//defaultType:眼睛状态 passwordType:密码可见与否状态
eyeStatus: function() {
if (this.data.defaultType) {
this.setData({
passwordType: false,
defaultType: false,
})
} else {
this.setData({
passwordType: true,
defaultType: true,
})
}
},
})