在编辑器和苹果手机上面显示就是正常的大小,在安卓手机上面黑点就非常大,需要单独调
安卓手机显示比较大
wxml
注意:在html中的input是通过切换type的属性值来实现隐藏显示的
在微信小程序的input里面type没有password属性 是通过password属性的true或者false来设置是否为密码框
<view class="input-item">
<text class="tit">密码</text>
<view style="display: flex;justify-content: space-between; width: 100%;">
<input style="font-size: {{size}};" type="text" password="{{show}}" placeholder="请输入密码" model:value="{{password}}" />
<van-icon style="padding:0 30rpx;" bindtap="showpassword" name="{{show?'eye-o':'closed-eye'}}" color="#000000" />
</view>
</view>
wxss
.input-item{
display:flex;
flex-direction: column;
align-items:flex-start;
justify-content: center;
padding: 0 30rpx;
background:#dddddde1;
height: 120rpx;
border-radius: 4px;
margin-bottom: 50rpx;
}
.input-item:last-child{
margin-bottom: 0;
}
.input-item .tit{
height: 50rpx;
line-height: 56rpx;
font-size: 30rpx;
color: #606266;
}
.input-item input{
height: 60rpx;
font-size: 30rpx;
color: #303133;
width: 100%;
}
js
data: {
// 显示隐藏密码
let size = this.data.size,
let show = this.data.show,
let isandroid = this.data.isandroid,
// 密码
password: "",
},
onShow() {
let size = this.data.size
let show = this.data.show
let isandroid = this.data.isandroid
// 获取手机类型 安卓、苹果
wx.getSystemInfo({
success(res) {
// console.log(res.platform)
if (res.platform == "android" && show) {
size = "20rpx"
isandroid = true
}
}
})
this.setData({
size: size,
isandroid: isandroid
})
},
// 切换显示密码
showpassword() {
// 如果是安卓手机并且密码显示状态为 显示密码,点击关闭密码显示的时候字体变小
if (this.data.isandroid && !this.data.show) {
this.setData({
show: !this.data.show,
size: "20rpx"
})
} else {
this.setData({
show: !this.data.show,
size: "30rpx"
})
}
}