支付寶小程序表單組件 單選項(xiàng)目·Switch

單選開關(guān)。

注意：

• iOS 和安卓展現(xiàn)樣式有所差異。iOS 單選開關(guān)為圓形；安卓單選開關(guān)為方形。
• 不支持自定義 switch 樣式，如大小等。

掃碼體驗(yàn)

示例代碼

<!-- API-DEMO page/component/switch/switch.axml -->
<view class="page">
  <view class="page-description">開關(guān)</view>
  <view class="page-section">
    <view class="page-section-demo switch-list">
      <view class="switch-item">
        <switch checked onChange="switch1Change" aria-label="{{switch1 ? 'switch opened' : 'switch closed'}}" />
      </view>
      <view class="switch-item">
        <switch onChange="switch2Change"/>
      </view>
      <view class="switch-item">
        <switch color="red" checked />
      </view>
    </view>
  </view>
</view>
// API-DEMO page/component/switch/switch.js
Page({
  data: {
    switch1: true,
  },
  switch1Change(e) {
    console.log('switch1 發(fā)生 change 事件，攜帶值為', e.detail.value);
    this.setData({
      switch1: e.detail.value,
    });
  },
  switch2Change(e){
    console.log('switch2 發(fā)生 change 事件，攜帶值為', e.detail.value);
  },
});
/* API-DEMO page/component/switch/switch.acss */
.switch-item + .switch-item {
  margin-top: 20rpx;
}

屬性