简体中文
简体中文
# switch
组件类型：UniSwitchElement
开关选择器
# switch 兼容性
| Android | iOS | web |
|---|---|---|
| 3.9 | 4.11 | 4.0 |
# 属性
| 名称 | 类型 | 默认值 | 描述 | ||||||
|---|---|---|---|---|---|---|---|---|---|
| name | string | - | 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交 | ||||||
| checked | boolean | - | 是否选中 | ||||||
| type | string | - | 样式，有效值：switch, checkbox | ||||||
| |||||||||
| color | string(string.ColorString) | - | switch 的颜色，同 css 的 color | ||||||
| disabled | boolean | - | 是否禁用 | ||||||
| @change | (event: UniSwitchChangeEvent) => void | - | checked 改变时触发 change 事件，event.detail={ value:checked} | ||||||
# type 兼容性
| Android | iOS | web | |
|---|---|---|---|
| switch | x | x | 4.0 |
| checkbox | x | x | 4.0 |
type为checkbox只有微信小程序和Web平台支持。一般建议使用标准的checkbox组件
# 事件
# UniSwitchChangeEvent
# UniSwitchChangeEvent 的属性值
| 名称 | 类型 | 必填 | 默认值 | 描述 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| detail | UniSwitchChangeEventDetail | 是 | - | - | ||||||||||
| ||||||||||||||
| bubbles | boolean | 是 | - | 是否冒泡 | ||||||||||
| cancelable | boolean | 是 | - | 是否可以取消 | ||||||||||
| type | string | 是 | - | 事件类型 | ||||||||||
| target | UniElement | null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 | ||||||||||
| currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。 | ||||||||||
| timeStamp | number | 是 | - | 事件发生时的时间戳 | ||||||||||
# UniSwitchChangeEvent 的方法
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |
| preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |
# switch 属性兼容性
| Android | iOS | web | |
|---|---|---|---|
| name | 3.9 | 4.11 | 4.0 |
| checked | 3.9 | 4.11 | 4.0 |
| type | x | x | 4.0 |
| color | 3.9 | 4.11 | 4.0 |
| disabled | 3.9 | 4.11 | 4.0 |
| @change | 3.9 | 4.11 | 4.0 |
# 示例
Template
Script
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">默认样式</view>
<view class="flex-row">
<switch class="switch-checked" :checked="checked" @change="switch1Change" />
<switch @change="switch2Change" />
<!-- <text class="switch-checked-value">{{clickCheckedValue}}</text> -->
</view>
<view class="uni-title">禁用样式</view>
<view class="flex-row">
<switch class="switch-checked" :checked="checked" :disabled="true" />
<switch :disabled="true" />
</view>
<view class="uni-title">不同颜色和尺寸的switch</view>
<view class="flex-row">
<switch class="switch-color-checked" :color="color" style="transform:scale(0.7)" :checked="true" />
<switch class="switch-color" :color="color" style="transform:scale(0.7)" />
</view>
<view class="uni-title">推荐展示样式</view>
</view>
<view class="uni-list">
<view class="uni-list-cell uni-list-cell-padding">
<view class="uni-list-cell-db">开启中</view>
<switch :checked="true" />
</view>
<view class="uni-list-cell uni-list-cell-padding">
<view class="uni-list-cell-db">关闭</view>
<switch />
</view>
</view>
</view>
</template>
<style>
.flex-row {
flex-direction: row;
}
</style>
