Interpretation and analysis of WeChat applet components: switch switch selector-Mini Program Development-php.cn

Interpretation and analysis of WeChat applet components: switch switch selector

巴扎黑

Release： 2017-03-29 09:14:57

Original

2134 people have browsed it

switch switch selectorComponent description:

switch, switch selector. You can only choose or not choose. This type belongs to form control or query condition control.

switch switch selectorThe sample code runs as follows:

The following is the WXML code:

##[XML]

Plain text view Copy code

<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>

Copy after login

The following is the JS code:

##[JavaScript]

Plain text view

Copy code

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)
  }
})

Copy after login

The following is the WXSS code:

#[CSS]

Plain text view Copy code

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

Copy after login

switch switch selector's Main properties

##Attribute nameBooleanStringEventHandleThe change event is triggered when checked changes, event.detail={ value:checked}

Type

Default value

Description

checked
false Whether checked type
switch Style, valid values: switch, checkbox bindchange

Personal experience: It is suitable for selecting true and false in a single item. It is not recommended to use the checkbox style

This is suitable for selecting true and false for a single item. It is not recommended to use the checkbox style. Because the checkbox control already exists. Moreover, when using the checkbox style, there is no following text. The text on the picture is pieced together by me, and no control events have been added (it should not be used this way)
The above is the detailed content of Interpretation and analysis of WeChat applet components: switch switch selector. For more information, please follow other related articles on the PHP Chinese website!