?在編輯器和蘋果手機(jī)上面顯示就是正常的大小，在安卓手機(jī)上面黑點(diǎn)就非常大，需要單獨(dú)調(diào)

?

安卓手機(jī)顯示比較大

?wxml

注意：在html中的input是通過切換type的屬性值來實(shí)現(xiàn)隱藏顯示的

在微信小程序的input里面type沒有password屬性 是通過password屬性的true或者false來設(shè)置是否為密碼框

<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="請(qǐng)輸入密碼" 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文章來源地址http://www.zghlxwxcb.cn/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
    // 獲取手機(jī)類型 安卓、蘋果
    wx.getSystemInfo({
      success(res) {
        // console.log(res.platform)
        if (res.platform == "android" && show) {
          size = "20rpx"
          isandroid = true
        }
      }
    })
    this.setData({
      size: size,
      isandroid: isandroid
    })
  },

   // 切換顯示密碼
  showpassword() {
    // 安卓手機(jī)在有內(nèi)容并且是從顯示狀態(tài)到隱藏狀態(tài)就變?yōu)樾∽煮w 其他情況都為正常大字體
    if (this.data.isandroid && !this.data.show && this.data.password) {
      // 安卓手機(jī)
      this.setData({
        show: !this.data.show,
        size: "20rpx"
      })
    } else {
      // 其他手機(jī)
      this.setData({
        show: !this.data.show,
        size: "30rpx"
      })
    }
  },
  // 密碼輸入中
  input() {
    // 在輸入中如果是安卓手機(jī)并且有內(nèi)容并且當(dāng)前顯示狀態(tài)為隱藏就變成小字體 其他情況都為正常大字體
    if (this.data.isandroid && this.data.password && this.data.show) {
      this.setData({
        size: "20rpx"
      })
    } else {
      this.setData({
        size: "30rpx"
      })
    }
  },

到了這里，關(guān)于微信小程序做登錄密碼顯示隱藏效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！