跳到主要内容
版本:4.x

Switch

开关选择器

支持情况:

参考文档

类型

ComponentType<SwitchProps>

示例代码

export default class PageView extends Component {
constructor() {
super(...arguments)
}

render() {
return (
<View className='components-page'>
<Text>默认样式</Text>
<Switch checked/>
<Switch/>
<Text>推荐展示样式</Text>
<Switch checked/>
<Switch/>
</View>
)
}
}

SwitchProps

参数类型默认值必填说明
checkedbooleanfalse是否选中
defaultCheckedboolean设置在 React 非受控状态下,当前是否选中
disabledbooleanfalse是否禁用
type"switch" or "checkbox""switch"样式,有效值:switch, checkbox
colorstring"#04BE02"switch 的颜色,同 css 的 color
nativePropsRecord<string, unknown>用于透传 WebComponents 上的属性到内部 H5 标签上
namestring组件名字,用于表单提交获取数据。
controlledstringfalse是否为受控组件,为 true 时,checked 会完全受 setData 控制。
ariaLabelstring无障碍访问,(属性)元素的额外描述
onChangeCommonEventFunction<onChangeEventDetail>checked 改变时触发 change 事件

API 支持度

API微信小程序百度小程序支付宝小程序抖音小程序QQ 小程序京东小程序H5React NativeHarmonyHarmony hybrid
SwitchProps.checked✔️✔️✔️✔️✔️✔️✔️✔️✔️
SwitchProps.defaultChecked✔️✔️✔️✔️✔️✔️✔️✔️✔️
SwitchProps.disabled✔️✔️✔️✔️✔️✔️✔️✔️
SwitchProps.type✔️✔️✔️✔️✔️✔️✔️✔️
SwitchProps.color✔️✔️✔️✔️✔️✔️✔️✔️✔️
SwitchProps.nativeProps✔️✔️
SwitchProps.name✔️
SwitchProps.controlled✔️
SwitchProps.ariaLabel✔️
SwitchProps.onChange✔️✔️✔️✔️✔️✔️✔️✔️✔️

onChangeEventDetail

参数类型
valueboolean