废弃: 本组件已不推荐业务上使用。由于各端实现不一致且端上定制能力较弱,不适合作为内置组件实现,因此建议开发者通过 jsn 上层能力自行定制该组件.
<switch>
是个类似 checkbox 的 UI
注意: switch 组件的外观在三个平台(iOS, Android, Web)稍有不同,这和各平台的 UI 风格有关。
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
margin
和margin-xxx
padding
和padding-xxx
border
和border-xxx
注意: 如果
<switch>
的容器没有设置为align-items:flex-start
,则 Android 中的开关将被拉伸。
通用样式
flexbox
布局position
opacity
background-color
查看 组件通用样式
使用说明
- 不要设置样式
width
andheight
,因为它们用在<switch>
上不会影响该组件的外观和布局. <switch>
不支持内嵌子组件.