switch | uni-app官网

# switch

开关选择器。

HarmonyOS Next 兼容性

HarmonyOS Next
HBuilderX 4.23

属性说明

|属性名|类型|默认值|说明|平台差异说明| |:-|:-|:-|:-|:-|:-| |checked|Boolean|false|是否选中|| |disabled|Boolean|false|是否禁用|抖音小程序与飞书小程序不支持| |type|String|switch|样式，有效值：switch, checkbox|| |color|Color||switch 的颜色，同 css 的 color| | |@change|EventHandle||checked 改变时触发 change 事件，event.detail={ value:checked}||

属性 HarmonyOS Next 兼容性

名称	HarmonyOS Next 兼容性
indicator-dots	HBuilderX 4.23
indicator-color	HBuilderX 4.23
indicator-active-color	HBuilderX 4.23
active-class	-
changing-class	-
acceleration	-
disable-programmatic-animation	-
disable-touch	-
touchable	-
easing-function	-
autoplay	HBuilderX 4.23
current	HBuilderX 4.23
current-item-id	HBuilderX 4.23
interval	HBuilderX 4.23
duration	HBuilderX 4.23
circular	HBuilderX 4.23
vertical	HBuilderX 4.23
rebound	-
previous-margin	-
next-margin	-
display-multiple-items	-
skip-hidden-item-layout	-
@change	HBuilderX 4.23
@transition	HBuilderX 4.23
@animationfinish	HBuilderX 4.23

示例查看演示

Template

Script

<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title">默认样式</view>
			<view>
				<switch checked @change="switch1Change" />
				<switch @change="switch2Change" />
			</view>
			<view class="uni-title">不同颜色和尺寸的switch</view>
			<view>
				<switch checked color="#FFCC33" style="transform:scale(0.7)"/>
				<switch color="#FFCC33" style="transform:scale(0.7)"/>
			</view>
			<view class="uni-title">推荐展示样式</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">开启中</view>
				<switch checked />
			</view>
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">关闭</view>
				<switch />
			</view>
		</view>
	</view>
</template>