简体中文
组件类型:UniSwitchElement
开关选择器
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} |
Android | iOS | web | |
---|---|---|---|
switch | x | x | 4.0 |
checkbox | x | x | 4.0 |
type为checkbox只有微信小程序和Web平台支持。一般建议使用标准的checkbox组件
名称 | 类型 | 必填 | 默认值 | 描述 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
detail | UniSwitchChangeEventDetail | 是 | - | - | ||||||||||
| ||||||||||||||
bubbles | boolean | 是 | - | 是否冒泡 | ||||||||||
cancelable | boolean | 是 | - | 是否可以取消 | ||||||||||
type | string | 是 | - | 事件类型 | ||||||||||
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | ||||||||||
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | ||||||||||
timeStamp | number | 是 | - | 事件发生时的时间戳 |
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |
preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |
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>