<switch> (已废弃)

废弃: 本组件已不推荐业务上使用。由于各端实现不一致且端上定制能力较弱,不适合作为内置组件实现,因此建议开发者通过 jsn 上层能力自行定制该组件.

<switch> 是个类似 checkbox 的 UI

注意: switch 组件的外观在三个平台(iOS, Android, Web)稍有不同,这和各平台的 UI 风格有关。

Android Web iOS
Android Web iOS

注意: switch 不支持一些涉及布局的样式, 如 width, height, margin 等,下面有详细的样式不支持列表.

基本用法

<switch></switch>

特性

Attribute Type Value Default Value
checked Boolean true / false false
disabled Boolean true / false false

checked

表示组件的选中状态。

disabled

表示组件是否处于不可交互状态。

组件方法

无。

事件

  • change:改变开关状态时触发该事件。

    事件中 event 对象属性:

    • value: 组件布尔值真或假。
    • timestamp: 事件的时间戳。
  • 通用事件

    支持所有通用事件:

    • click
    • longpress
    • appear
    • disappear

    查看 通用事件

样式

注意: 某些样式在 switch 组件上不能使用或使用无效,它们是:

  • width
  • height
  • min-width
  • min-height
  • marginmargin-xxx
  • paddingpadding-xxx
  • borderborder-xxx

注意: 如果 <switch> 的容器没有设置为 align-items:flex-start,则 Android 中的开关将被拉伸。

  • 通用样式

    • flexbox 布局
    • position
    • opacity
    • background-color

查看 组件通用样式

使用说明

  • 不要设置样式 width and height,因为它们用在 <switch> 上不会影响该组件的外观和布局.
  • <switch> 不支持内嵌子组件.