WeChatウィジェットボタンをクリックして、inputのdisabledを動的に切り替えて無効/有効状態機能を有効にします。
4110 ワード
WeChatウィジェットプロジェクトをする時、機能と個人情報資料の修正と保存があります。以下は説明及び簡略化されたコードです。
1.ページの読み込みが完了した場合、すべてのinputは無効状態となります。
2.編集ボタンをクリックすると、テキストは「保存」に切り替わり、身分証inputは常に変更できない状態(すなわち無効)を維持しています。名前inputは変更できます。
3.再度ボタンをクリックして文字を「編集」に切り返し、すべてのinputが無効状態になります。
以下はwxmlの部分です
ここでは、「WeChatウィジェットdisable属性は有効ではない」という問題を解決するための知識を追加します。
WeChatウィジェットにdisabled属性を持つフォームコンポーネントがあります。
ブトン、check box、input、picker、ラジオ、slade.、スイッチ、textarea
使用禁止のセットを固定しているなら、disableをそのまま置いてもいいです。簡単で乱暴です。
1.値を無視する場合:
なお、公式文書では、disabledの値はブール値(Boolean)であり、上記の文字列(String)は、「false」を付与するとtrueとなります。
だからdisabled=「false」はdisabled=trueです。無効にしないと無効です。
disabledの値がダイナミックで柔軟であれば、例えば:
index.jsにdataデータ変数を設定します。
ここで、WeChatウィジェットのボタンをクリックして、inputのdisabledを動的に切り替えて、ステータス機能を有効にする記事を紹介します。これに関連して、WeChatウィジェットのinputの内容を変更したいです。以前の記事を検索したり、下記の関連記事を閲覧したりしてください。これからもよろしくお願いします。
1.ページの読み込みが完了した場合、すべてのinputは無効状態となります。
2.編集ボタンをクリックすると、テキストは「保存」に切り替わり、身分証inputは常に変更できない状態(すなわち無効)を維持しています。名前inputは変更できます。
3.再度ボタンをクリックして文字を「編集」に切り返し、すべてのinputが無効状態になります。
以下はwxmlの部分です
<view class="btn">
<button bindtap="changeInfo">{{text}}</button> //
</view>
<view> :
<input class="uName" type="text" disabled='{{isDisabled}}'/>
</view>
<view> :
<input class="uIdentity" type="idcard" disabled='true'/>
</view>
上のコードは、名前が動的にロードされているため、disabledがdisabled='{{isDisabled}}
'と書かれており、身分証明書inputはあくまでも修正不可能な状態であるため、disabledはdisabled=‘true'
以下はjsの部分です
Page({
data: {
isDisabled:true, // disabled
text:" " //
},
changeInfo(e) { //
// this.data.isDisabled,
if (!this.data.isDisabled) { // disabled=false
this.setData({
isDisabled: true, // isDisabled true( )
text: " " // “ ”
})
}
else { // disabled=true
this.setData({
isDisabled: false, // isDisabled false( )
text: " " // “ ”
})
}
}
ユーザー情報データをinputボックスに動的にロードします。このプロセスでは、身分証明書は常に変更できない状態を維持しています。名前はボタンによって動的に編集と保存の状態に切り替わります。ここでは、「WeChatウィジェットdisable属性は有効ではない」という問題を解決するための知識を追加します。
WeChatウィジェットにdisabled属性を持つフォームコンポーネントがあります。
ブトン、check box、input、picker、ラジオ、slade.、スイッチ、textarea
使用禁止のセットを固定しているなら、disableをそのまま置いてもいいです。簡単で乱暴です。
1.値を無視する場合:
<button disabled> </button>
2.使用値の場合:
<!-- -->
<button disabled="{{true}}"> </button>
<button disabled="{{false}}"> </button>
<!-- -->
<button disabled="true"> </button>
<button disabled="false"> </button>
以上のエラーの書き方では、disabled=「true」は有効ですが、disabled=「false」は無効です。なお、公式文書では、disabledの値はブール値(Boolean)であり、上記の文字列(String)は、「false」を付与するとtrueとなります。
だからdisabled=「false」はdisabled=trueです。無効にしないと無効です。
disabledの値がダイナミックで柔軟であれば、例えば:
index.jsにdataデータ変数を設定します。
Page({
data: {
isDisabled: true
}
})
index.wxmlにフォームコンポーネントを使用します。
<input type="text" disabled="{{isDisabled}}" />
<button disabled="{{isDisabled}}"> </button>
disabledの値を変更します
this.setData({
isDisabled: false
})
締め括りをつけるここで、WeChatウィジェットのボタンをクリックして、inputのdisabledを動的に切り替えて、ステータス機能を有効にする記事を紹介します。これに関連して、WeChatウィジェットのinputの内容を変更したいです。以前の記事を検索したり、下記の関連記事を閲覧したりしてください。これからもよろしくお願いします。