像常見的app在注冊，登錄的時候會有輸入密碼的一項，通常又分為密碼可見與不可見之分，微信小程序也存在這一的需求，剛開始的思路是利用input的type屬性text和password來切換狀態，但在真機上測試時ios上存在問題。后面改為用兩個input來實現。
頁面布局如下
<view class="content flex">
<view class="img">
<image src="../../images/password_login.png" style="width:30rpx;height:38rpx;" mode="aspectFit"></image>
</view>
<view class="input">
<input wx:if="{{!isShow1}}" placeholder="請輸入新密碼" @input="newPass" value="{{newPassword}}" type="text" maxlength="16"></input>
<input wx:else placeholder="請輸入新密碼" @input="hideNewPass" value="{{newPassword}}" type="password" maxlength="16"></input>
</view>
<view class="see">
<image class="" @tap="showNewPsd1" src="{{isShow1?'../../images/nosee.png':'../../images/see.png'}}" style="width:40rpx;height:23rpx" mode="aspectFit"></image>
</view>
</view>
左中右布局方式 中間放了兩個input,一個是type=“text”,用來放輸入時可見的，另一個是type=“password”，用來放隱藏密碼的。在點擊右邊小眼睛圖標的時候切換這兩個狀態。
js邏輯
用的是小程序wepy框架，this.isShow=true等價為this.setData({
isShow:true});this.$apply()用來檢查數據變化，wepy自帶。原生不用。
data={
isShow1:true,
inputType1:"password",
newPassword："",
}
methods={
//輸入新密碼
newPass(e){
this.newPassword=e.detail.value;
this.$apply();
},
//輸入新密碼
hideNewPass(e){
this.newPassword=e.detail.value;
this.$apply();
},
//點擊小眼睛圖標
showNewPsd1(){
if(this.isShow1){
this.isShow1=false;
this.inputType1="text";
this.$apply();
}else{
this.isShow1=true;
this.inputType1="password";
this.$apply();
}
},
}
功能簡單，歡迎指出小程序文檔中的錯誤。