微信小程式元件解讀與分析之switch 開關選擇器-小程式開發-PHP中文網

微信小程式元件解讀與分析之switch 開關選擇器

巴扎黑

發布： 2017-03-29 09:14:57

原創

2135 人瀏覽過

switch 開關選擇器元件說明:

switch，開關選擇器。只能選擇或不選。這種屬於表單控制項或查詢條件控制項。

switch 開關選擇器範例程式碼運作效果如下：

以下是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;
}

登入後複製

switch 開關選擇器的#主要屬性

##屬性名稱#類型預設值說明checkedtypebindchange


#Boolean	false	是否選取
String	switch	#樣式，有效值：switch, checkbox
EventHandle		checked改變時觸發change事件，event.detail={ value:checked}