Home  >  Article  >  WeChat Applet  >  WeChat applet component: switch switch selector interpretation and analysis

WeChat applet component: switch switch selector interpretation and analysis

高洛峰
高洛峰Original
2017-03-31 13:41:222511browse

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 selectorSample code running effect as follows:
微信小程序组件:switch 开关选择器解读和分析

The following is the WXML 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>



The following is the JS 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)
  }
})



##The following is the WXSS code:

##

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

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 Yes Select the 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 WeChat applet component: switch switch selector interpretation and analysis. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn