如何设置开关Switch_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

开关选择器，表示开和关这两种状态之间的切换，相比较于原生 switch 实现了 iOS 跟 Android 端的一致体验。和 checkbox 的区别是，切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。

属性

属性	类型	必填	默认值	说明
checked	boolean	否	-	是否勾选
disabled	boolean	否	false	是否禁用
loading	boolean	否	false	是否加载状态
color	string	否	#1677ff	# 选中背景色
checkedText	string	否	-	选中时的内容
uncheckedText	string	否	-	非选中时的内容
size	'medium' \| 'small' \| 'x-small'	否	medium	组件尺寸
controlled	boolean	否	false	是否受控
mode	'normal' \|'form'	否	'normal'	配合 From/FormItem 组件使用时，mode 需设置为 form
className	string	否	-	类名

事件

事件名	说明	类型
onChange	点击 switch ，触发此回调	`( checked: boolean ) => void`

插槽

名称	说明
checked	选中时的内容插槽
unchecked	非选中时的内容插槽

样式类

类名	说明
amd-switch	整体样式
amd-switch-checked	选中时的样式
amd-switch-disabled	禁用时的样式

代码示例

基本使用

index.axml 的代码示例如下：

<view>
  <demo-block title="基础用法">
    <switch 
      checked="{{false}}"
      onChange="handleChange" 
    />
  </demo-block>
  <demo-block title="有默认值">
    <switch 
      checked="{{true}}"/>
  </demo-block>
  <demo-block title="文字和图标">
    <switch 
      checkedText="开"
      uncheckedText="关"/>
    <switch>
      <am-icon type="CheckOutline" slot="checked" size="x-small"/>
      <am-icon type="CloseOutline" slot="unchecked"  size="x-small"/>
    </switch>
  </demo-block>
  <demo-block title="自定义颜色">
    <switch 
      checked="{{true}}"
      color="#00b578"/>
  </demo-block>
  <demo-block title="禁用状态">
    <switch 
      checked="{{true}}"
      disabled="{{true}}"/>
    <switch 
      disabled="{{true}}"/>
  </demo-block>
  <demo-block title="加载状态">
    <switch 
      loading="{{true}}"/>
  </demo-block>

  <demo-block title="尺寸small">
    <switch  size="small" />
  </demo-block>
</view>

index.js 的代码示例如下：

Page({
  data: {
    value: false,
  },
  handleChange(checked) {
    console.log('change checked', checked)
    my.alert({
      title: `当前 switch 为 ${checked ? '打开' : '关闭'} 状态。`,
    });
  },

});

index.acss 的代码示例如下：

.amd-switch {
  margin-right: 16rpx;
}

index.json 的代码示例如下：

{
  "defaultTitle": "Switch",
  "usingComponents": {
    "switch": "antd-mini/es/Switch/index",
    "demo-block": "../../components/DemoBlock/index",
    "am-icon": "antd-mini/es/Icon/index"
  }
}