WeChat 미니 프로그램 구성요소 해석 및 분석: 체크박스 옵션 소개-미니 프로그램 개발-php.cn

WeChat 미니 프로그램 구성요소 해석 및 분석: 체크박스 옵션 소개

高洛峰

풀어 주다： 2017-03-19 17:32:04

원래의

2269명이 탐색했습니다.

체크박스 옵션구성요소 설명:

체크박스는 미니 프로그램 양식 구성 요소 중 하나로서 사용자가 양식에서 선택하도록 안내하는 기능입니다.

checkbox 구성 요소를 사용하려면 동일한 그룹의 모든 checkbox 태그 외에 checkbox-group 태그도 사용해야 합니다.

checkbox-group 태그의 기능은 onchange 이벤트를 checkbox 태그에 바인딩하고 사용자가 선택할 때 사용자에게 안내하는 것입니다.

단일 체크박스 태그는 onchange 이벤트를 트리거하지 않으며, 체크박스 그룹에 바인딩된 경우에만 트리거됩니다.

체크박스 체크박스컴포넌트샘플 코드는 다음과 같이 실행됩니다.

WXML 코드는 다음과 같습니다.

<view>
    <checkbox-group class="checkbox-group" bindchange="changed">
        <label class="items" wx:for="{{item}}">
            <checkbox value="{{item.value}}" checked="{{item.checked}}" disabled="{{item.disabled}}"/>
            {{item.name}}
        </label>
    </checkbox-group>
</view>

로그인 후 복사

JS 코드는 다음과 같습니다.

Page({
  data:{
    item: [
      {&#39;name&#39;: &#39;俄罗斯&#39;, &#39;value&#39;: &#39;RS&#39;, &#39;disabled&#39;: false},
      {&#39;name&#39;: &#39;美国&#39;, &#39;value&#39;: &#39;US&#39;, &#39;disabled&#39;: false},
      {&#39;name&#39;: &#39;中国&#39;, &#39;value&#39;: &#39;CN&#39;, &#39;disabled&#39;: false, &#39;checked&#39;: true},
      {&#39;name&#39;: &#39;英国&#39;, &#39;value&#39;: &#39;UK&#39;, &#39;disabled&#39;: false},
      {&#39;name&#39;: &#39;日本&#39;, &#39;value&#39;: &#39;JP&#39;, &#39;disabled&#39;: true}
    ]
  },
  changed: function(e) {
    console.info(&#39;你选择了&#39; + e.detail.value);
  }
})

로그인 후 복사

WXSS 코드는 다음과 같습니다.

.items {
    display: block;
    margin: 30rpx;
}

로그인 후 복사

체크박스 옵션의 주요 속성:

체크박스 그룹

bindchange

属性名称	数据类型	描述
bindchange	EventHandle	中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

속성 이름

데이터 유형

설명

EventHandle

선택한 항목이 발생합니다. 변경이 변경 이벤트를 트리거합니다. 세부정보 = {value:[선택한 확인란의 값 배열]}

属性名称	数据类型	描述	默认值
value	String	标识，选中时触发的 change 事件，并携带的value值
checked	Boolean	是否使默认被选中	false
disabled	Boolean	是否使被禁用	false

체크박스

속성 이름	데이터 유형	설명	기본값
값	String	선택 시 의 변경 이벤트를 트리거하며
선택	부울 td>	기본적으로 선택 여부	false
비활성화됨	부울	비활성화 여부	거짓