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 复选框样式

# 示例

在开发者工具中预览效果

# 扫码体验

请使用百度APP扫码

# 代码示例1: 默认样式

    <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>
    
    Page({
        data: { },
        switchChange: e => {
            console.log(e.detail);
        }
    });
    
    
    

    # 代码示例2: 设置checkbox样式

      <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: 列表展示

        <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: 包含禁用选项

          <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: 自定义颜色

            <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 自带振动反馈,可在系统设置 -声音与触感 -系统触感反馈中关闭。