在编辑器和苹果手机上面显示就是正常的大小,在安卓手机上面黑点就非常大,需要单独调
安卓手机显示比较大
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" bindinput="input" 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.sizelet show = this.data.showlet 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.data.password) {// 安卓手机this.setData({show: !this.data.show,size: "20rpx"})} else {// 其他手机this.setData({show: !this.data.show,size: "30rpx"})}},// 密码输入中input() {// 在输入中如果是安卓手机并且有内容并且当前显示状态为隐藏就变成小字体 其他情况都为正常大字体if (this.data.isandroid && this.data.password && this.data.show) {this.setData({size: "20rpx"})} else {this.setData({size: "30rpx"})}},