支付宝小程序表单组件 单选项目·Switch

单选开关。

注意：

• iOS 和安卓展现样式有所差异。iOS 单选开关为圆形；安卓单选开关为方形。
• 不支持自定义 switch 样式，如大小等。

扫码体验

示例代码

<!-- API-DEMO page/component/switch/switch.axml -->
<view class="page">
  <view class="page-description">开关</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 发生 change 事件，携带值为', e.detail.value);
    this.setData({
      switch1: e.detail.value,
    });
  },
  switch2Change(e){
    console.log('switch2 发生 change 事件，携带值为', e.detail.value);
  },
});
/* API-DEMO page/component/switch/switch.acss */
.switch-item + .switch-item {
  margin-top: 20rpx;
}

属性