WeChat 애플릿 구성요소 해석 및 분석: 스위치 스위치 선택기-미니 프로그램 개발-php.cn

WeChat 애플릿 구성요소 해석 및 분석: 스위치 스위치 선택기

巴扎黑

풀어 주다： 2017-03-29 09:14:57

원래의

2208명이 탐색했습니다.

스위치 스위치 선택기구성요소 설명:

스위치, 스위치 선택기. 선택하거나 선택하지 않을 수만 있습니다. 이 유형은 양식 제어 또는 쿼리 조건 제어에 속합니다.

스위치 선택기샘플 코드는 다음과 같이 실행됩니다.

다음은 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(&#39;switch1 发生 change 事件，携带值为&#39;, e.detail.value)
  },
  switch2Change: function (e){
    console.log(&#39;switch2 发生 change 事件，携带值为&#39;, e.detail.value)
  }
})

로그인 후 복사

다음은 WXSS 코드입니다.

[CSS] 일반 텍스트 보기 코드 복사

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

로그인 후 복사

스위치 스위치 선택기의 주요 속성

속성 이름

属性名	类型	默认值	说明
checked	Boolean	false	是否选中
type	String	switch	样式，有效值：switch, checkbox
bindchange	EventHandle		checked改变时触发change事件，event.detail={ value:checked}

유형

기본값

설명

체크됨

부울

false

체크 여부

유형

문자열

스위치

스타일, 유효한 값: 스위치, 체크박스

bindchange

EventHandle

변경 이벤트는 변경 사항을 확인하면 트리거됩니다. Detail={ value:checked}

개인 경험: 단일에 대해 참과 거짓을 선택하는 데 적합 항목, 체크박스 스타일은 권장하지 않습니다

단일 항목에 대해 참과 거짓을 선택하는 데 적합하지 않습니다. 체크박스 스타일을 사용하는 것이 좋습니다. 확인란 컨트롤이 이미 존재하기 때문입니다. 게다가 체크박스 스타일을 사용하면 다음과 같은 텍스트가 없습니다. 그림의 텍스트는 제가 엮은 것이며 컨트롤 이벤트도 추가되지 않았습니다(이런 식으로 사용하면 안 됩니다)

위 내용은 WeChat 애플릿 구성요소 해석 및 분석: 스위치 스위치 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!