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

wxml

注意：在html中的input是通过切换type的属性值来实现隐藏显示的

<view class="input-item">
        <text class="tit">密码</text>
        <view style="display: flex;justify-content: space-between;">
          <input type="text" password="{
         
  {show}}" placeholder="请输入密码" model:value="{
         
  {password}}" />
          <van-icon style="margin-left: 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: {
    // 显示隐藏密码
    show: true,
    // 密码
    password: "",
  },


 // 切换显示密码
  showpassword() {
    this.setData({
      show: !this.data.show,
    })
  }