title: Switch

sidebar_label: Switch

开关选择器

参考文档

类型

  1. ComponentType<SwitchProps>

示例代码

  1. export default class PageView extends Component {
  2. constructor() {
  3. super(...arguments)
  4. }
  5. render() {
  6. return (
  7. <View className='components-page'>
  8. <Text>默认样式</Text>
  9. <Switch checked/>
  10. <Switch/>
  11. <Text>推荐展示样式</Text>
  12. <Switch checked/>
  13. <Switch/>
  14. </View>
  15. )
  16. }
  17. }

SwitchProps

参数 类型 默认值 必填 说明
checked boolean false 是否选中
disabled boolean false 是否禁用
type "switch" | "checkbox" "switch" 样式,有效值:switch, checkbox
color string "#04BE02" switch 的颜色,同 css 的 color
onChange BaseEventOrigFunction<onChangeEventDetail> checked 改变时触发 change 事件

API 支持度

API 微信小程序 百度小程序 支付宝小程序 字节跳动小程序 H5 React Native
SwitchProps.checked ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
SwitchProps.disabled ✔️
SwitchProps.type ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
SwitchProps.color ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
SwitchProps.onChange ✔️

onChangeEventDetail

参数 类型
value boolean

API 支持度

API 微信小程序 百度小程序 支付宝小程序 字节跳动小程序 H5 React Native
Switch ✔️ ✔️ ✔️ ✔️ ✔️ ✔️