五、適合小白的小程序之密碼框密碼、*號顯示隱藏

首先呢，還是先看看效果吧!

非可視密碼下：

可視密碼下：

到此呢，上正菜，為大家奉上。

wxml下：

　　　　<view class='sameBox'>
        <icon class='iconfont .icon-mima'></icon>
        <input bindinput='passWordInput' name="passWord" type="{{typeName}}" placeholder='請輸入密碼'></input>
        <view class='seePass' bindtap='showPass'>
          <icon class="iconfont .icon-yanjing" wx:if="{{passFlag == 1}}"></icon>
          <icon class='iconfont .icon-bukeshi' wx:else></icon>
        </view>
      </view>

wxss下：

.sameBox{width: 100%;height: 50px;line-height: 50px;overflow: hidden;margin-top: 10px;}
.sameBox .iconfont:nth-child(1){float: left;font-size: 1.5rem;color: #4768F3;padding-left: 10px;}
.sameBox input{float: right;border-bottom: 1px solid #ccc;height: 97%;font-size: 0.85rem;width: 85%;color: #ccc;}
.sameBox:nth-child(2){position: relative;}
.seePass{position: absolute;top: 0;right: 0;width: 20px;height: 50px;padding-right: 20px;}
.seePass .icon-yanjing{font-size: 0.1rem;padding: 0;}

js下：

 

data: {
    typeName: 'password', // 密碼框的類型,用於顯示密碼時更改類型可看見輸入的密碼而非*號
    passFlag: 1,    // 密碼第幾次點擊代表,用於顯示不同的圖標
    storePass: '',  // 暫存密碼,用於顯示密碼
  },
  showPass(){     // 顯示密碼而非*號
    console.log(this.data.storePass)
    if (this.data.passFlag == 1){ // 第一次點擊
      this.setData({ passFlag: 2, typeName : 'text'});
    }else{                        // 第二次點擊
      this.setData({ passFlag: 1, typeName : 'password'});
    }
  },
  passWordInput(e) {    // 監聽密碼input框並把輸入的密碼在變量storePass下暫存起來,用於在顯示密碼操作展示
   console.log(e.detail.value)

    this.setData({
      storePass: e.detail.value,
      passWord: e.detail.value
    })
  },

 

END：到這里呢，想要的效果就可以實現了，希望對各位有用把，不足之處望海涵。。。