• 下载
  • 社区

switch 单选开关

单选开关。
注意:

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

扫码体验

qrcode for switch

效果示例

The screenshot of 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;
}

属性

属性 类型 默认值 描述 最低版本
name String - 组件名字,用于表单提交获取数据 -
checked Boolean - 是否选中 -
disabled Boolean - 是否禁用 -
color String - 组件颜色,同 CSS 色值 1.10.0
onChange EventHandle - checked 改变时触发,event.detail={ value:checked} -
controlled Boolean false 是否为受控组件,为 true 时,checked 会完全受 setData 控制 1.8.0