WeChat アプレット ラベル コンポーネントの詳細なコード例

この記事では、WeChat アプレットのラベル コンポーネントの詳細な説明と簡単な例を主に紹介します。必要な友人は参照してください。

実装レンダリング:

フォーム コンポーネントの使いやすさを向上させるには、 を使用します。 属性を使用して対応する id を見つけるか、ラベルの下にコントロールを配置します。クリックすると、対応するコントロールがトリガーされます。 for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。

for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有：button, checkbox, radio, switch

for は内部コントロールよりも高い優先順位を持ち、内部に複数のコントロールがある場合、デフォルトで最初のコントロールがトリガーされます。 現在バインドできるコントロールは、button、checkbox、radio、switch です。 属性名タイプ説明forStringバインドされたコントロールのID

サンプルコード:

りー

りー

<view class="section section_gap">
<view class="section__title">表单组件在label内</view>
<checkbox-group class="group" bindchange="checkboxChange">
 <view class="label-1" wx:for-items="{{checkboxItems}}">
 <label>
  <checkbox hidden value="{{item.name}}" checked="{{item.checked}}"></checkbox>
  <view class="label-1__icon">
  <view class="label-1__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
  </view>
  <text class="label-1__text">{{item.value}}</text>
 </label>
 </view>
</checkbox-group>
</view>

<view class="section section_gap">
<view class="section__title">label用for标识表单组件</view>
<radio-group class="group" bindchange="radioChange">
 <view class="label-2" wx:for-items="{{radioItems}}">
 <radio id="{{item.name}}" hidden value="{{item.name}}" checked="{{item.checked}}"></radio>
 <view class="label-2__icon">
  <view class="label-2__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
 </view>
 <label class="label-2__text" for="{{item.name}}"><text>{{item.name}}</text></label>
 </view>
</radio-group>
</view>


<view class="section section_gap">
<view class="section__title">绑定button</view>
<label class="label-3">
 <text>点击这段文字，button会被选中</text>
</label>
<view class="btn-area">
 <button type="default" name="1" bindtap="tapEvent">按钮</button>
</view>
</view>

<view class="section section_gap">
<view class="section__title">label内有多个时选中第一个</view>
<label class="label-4">
 <checkbox> 选中我 </checkbox>
 <checkbox> 选不中 </checkbox>
 <checkbox> 选不中 </checkbox>
 <checkbox> 选不中 </checkbox>
 <view class="label-4_text">点我会选中第一个</view>
</label>
</view>

関連記事:

WeChatミニプログラムのデータアクセス例の詳細な説明

WeChatミニプログラム開発チュートリアルのステップバイステップの説明

🎜WeChatミニプログラム開発のためのミニプログラムアーキテクチャの図解図🎜🎜

以上がWeChat アプレット ラベル コンポーネントの詳細なコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。