微信小程序做登录密码显示隐藏效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序做登录密码显示隐藏效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在编辑器和苹果手机上面显示就是正常的大小，在安卓手机上面黑点就非常大，需要单独调

微信小程序做登录密码显示隐藏效果,微信小程序,notepad++,小程序

安卓手机显示比较大

微信小程序做登录密码显示隐藏效果,微信小程序,notepad++,小程序

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文章来源地址https://www.toymoban.com/news/detail-533185.html

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.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"
      })
    }
  },

到了这里，关于微信小程序做登录密码显示隐藏效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！