switch 开关选择器

switch 开关选择器

解释：开关选择器。

属性说明

属性名	类型	默认值	必填	说明
checked	Boolean	false	否	是否选中
type	String	switch	否	样式，有效值：switch、checkbox
color	Color	#3388ff	否	switch 的颜色，同 CSS 的 color
disabled	Boolean	false	否	是否禁用
bindchange	EventHandle		否	checked 改变时触发 change 事件，`event.detail = {checked: true}`

type 有效值

值	说明
switch	切换样式
checkbox	复选框样式

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：默认样式

SWAN
JS

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">默认样式</view>
        <switch class="init-switch" checked="true" bindchange="switchChange"></switch>
        <text class="switch-text">已开启</text>
        <switch class="init-switch-after" checked="false" bindchange="switchChange"></switch>
        <text class="switch-text">已关闭</text>
    </view>
</view>

代码示例 2：设置 checkbox 样式

SWAN

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">设置checkbox样式</view>
        <switch class="init-switch" type="checkbox" checked></switch>
        <text class="switch-text">已开启</text>
        <switch class="init-switch-after" type="checkbox"></switch>
        <text class="switch-text">已关闭</text>
    </view>
</view>

代码示例 3：列表展示

SWAN

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">列表展示</view>
        <view class="item-scroll block border-bottom">
            <text class="switch-text">已开启</text>
            <switch checked></switch>
        </view>
        <view class="item-scroll block">
            <text class="switch-text">已关闭</text>
            <switch></switch>
        </view>
    </view>
</view>

代码示例 4：包含禁用选项

SWAN

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>包含禁用选项</view>
            <view>disabled</view>
        </view>
        <view class="item-scroll border-bottom block">
            <text class="switch-text">已开启</text>
            <switch checked color="#C3D1FF" disabled></switch>
        </view>
        <view class="item-scroll block">
            <text class="switch-text">已关闭</text>
            <switch disabled></switch>     
        </view>
    </view>
</view>

代码示例 5：自定义颜色

SWAN

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>自定义颜色</view>
            <view>color="#00BC89"</view>
        </view>
         <view class="item-scroll border-bottom block">
            <text class="switch-text">已开启</text>
            <switch checked color="#00BC89"></switch>
        </view>
        <view class="item-scroll block">
            <text class="switch-text">已关闭</text>
            <switch color="#00BC89"></switch>     
        </view>
    </view>
</view>

Bug & Tip

Tip：switch 类型切换时在 iOS 自带振动反馈，可在“系统设置 -> 声音与触感 -> 系统触感反馈”中关闭。