WeChat アプレット コンポーネントの解釈と分析: スイッチ スイッチ セレクター

スイッチ スイッチ セレクターコンポーネントの説明:

スイッチ、スイッチ セレクター。選べるのは選ぶか選ばないかだけ。このタイプは、フォーム制御またはクエリ条件制御に属します。

スイッチスイッチセレクターサンプルコードは次のように実行されます:

以下はWXMLコードです:

[XML] プレーンテキストビュー コードをコピー

<view class="section section">
  <text class="title">switch style</text>
  <view class="body-view">
    <switch checked bindchange="switch1Change"/>
  </view>
</view>
<view class="section section">
  <text class="title">switch style</text>
  <view class="body-view">
    <switch bindchange="switch2Change"/>
  </view>
</view>
<view class="section section">
  <text class="title">checkbox style</text>
  <view class="body-view">
    <switch type="checkbox" checked bindchange="switch1Change"/>
  </view>
</view>
<view class="section section">
  <text class="title">checkbox style</text>
  <view class="body-view">
    <switch type="checkbox" bindchange="switch2Change"/>
  </view>
</view>
<view class="section section">
  <text class="title">西游记里都有谁</text>
  <view class="body-view">
    <switch type="checkbox" checked bindchange="switch2Change"/><text class="title">牛魔王</text>
  </view>
  <view class="body-view">
    <switch type="checkbox" checked bindchange="switch2Change"/><text class="title">孙悟空</text>
  </view>
   <view class="body-view">
    <switch type="checkbox" checked bindchange="switch2Change"/><text class="title">猪八戒</text>
  </view>
  <view class="body-view">
    <switch type="checkbox"  bindchange="switch2Change"/><text class="title">旗木卡卡西</text>
  </view>
</view>

JSコードは次のとおりです:

[JavaScript] プレーンテキストビュー コードをコピー

Page({
  switch1Change: function (e){
    console.log('switch1 发生 change 事件，携带值为', e.detail.value)
  },
  switch2Change: function (e){
    console.log('switch2 发生 change 事件，携带值为', e.detail.value)
  }
})

以下はWXSSコードです:

[ CSS] プレーンテキストビュー

コピーコード

.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

スイッチスイッチセレクターの

メイン属性
属性名

タイプ スタイル、有効な値: checkboxがチェックされたとき変更 変更イベントをトリガーします。event.detail={ value:checked}個人的な経験: 単一の項目に対して true と false を選択するのに適しています。チェックボックス スタイルの使用はお勧めしません。

デフォルト値	説明	checked	Boolean false
	type	String	switch
	bindchange	EventHandle

単一の項目で true と false を選択するのに適しています。チェックボックス スタイルの使用は推奨されません。チェックボックス コントロールがすでに存在するためです。さらに、チェックボックススタイルを使用する場合、画像上のテキストは私がつなぎ合わせたものであり、コントロールイベントは追加されていません(このように使用すべきではありません)

。

以上がWeChat アプレット コンポーネントの解釈と分析: スイッチ スイッチ セレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。