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>