switch | uni-app-x

# switch

组件类型：UniSwitchElement

开关选择器

# 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 属性

名称

类型

默认值

兼容性

描述

name

string

表单的控件名称，作为键值对的一部分与表单(form组件)一同提交

checked

boolean

是否选中

type

string

样式，有效值：switch, checkbox

合法值

兼容性

描述

switch

checkbox

backgroundColor

string(string.ColorString)

switch 的关闭状态背景颜色

activeBackgroundColor

string(string.ColorString)

switch 的开启状态背景颜色

foreColor

string(string.ColorString)

switch 的滑块背景颜色

activeForeColor

string(string.ColorString)

switch 的开启状态下的滑块背景颜色

disabled

boolean

是否禁用

@change

(event: UniSwitchChangeEvent) => void

checked 改变时触发 change 事件，event.detail={ value:checked}

~~color~~

string(string.ColorString)

switch 的颜色，同 css 的 color (使用foreColor替代)

type为checkbox只有微信小程序和Web平台支持。一般建议使用标准的checkbox组件

# 事件

# UniSwitchChangeEvent

# UniSwitchChangeEventDetail

# UniSwitchChangeEventDetail 的属性值

名称	类型	必填	默认值	兼容性	描述
value	boolean	是	-	-	-

# 示例

hello uni-app x

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" />
      </view>
      <view class="uni-title">暗黑样式</view>
      <view class="flex-row">
        <switch id="darkChecked" background-color="#1f1f1f" activeBackgroundColor="#007aff" foreColor="#f0f0f0"
          activeForeColor="#ffffff" :checked="checked" />
        <switch id="dark" background-color="#1f1f1f" activeBackgroundColor="#007aff" foreColor="#f0f0f0"
          activeForeColor="#ffffff" />
      </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>