开关选择器。

属性说明

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

示例

查看演示

  1. <template>
  2.     <view>
  3.         <view class="uni-padding-wrap uni-common-mt">
  4.             <view class="uni-title">默认样式</view>
  5.             <view>
  6.                 <switch checked @change="switch1Change" />
  7.                 <switch @change="switch2Change" />
  8.             </view>
  9.             <view class="uni-title">推荐展示样式</view>
  10.         </view>
  11.         <view class="uni-list">
  12.             <view class="uni-list-cell uni-list-cell-pd">
  13.                 <view class="uni-list-cell-db">开启中</view>
  14.                 <switch checked />
  15.             </view>
  16.             <view class="uni-list-cell uni-list-cell-pd">
  17.                 <view class="uni-list-cell-db">关闭</view>
  18.                 <switch />
  19.             </view>
  20.         </view>
  21.     </view>
  22. </template>
  1. export default {
  2.     data() {
  3.         return {}
  4.     },
  5.     methods: {
  6.         switch1Change: function (e) {
  7.             console.log('switch1 发生 change 事件，携带值为', e.target.value)
  8.         },
  9.         switch2Change: function (e) {
  10.             console.log('switch2 发生 change 事件，携带值为', e.target.value)
  11.         }
  12.     }
  13. }

switch - 图1
示例代码说明：以上示例代码从hello uni-app示例中复制，涉及的css样式在hello uni-app的app.vue和uni.css中
预览H5效果：使用浏览器的手机模式访问https://hellouniapp.dcloud.net.cn/pages/component/switch/switch

注意

  • switch的默认颜色，在不同平台不一样。微信小程序是绿色的，字节跳动小程序为红色，其他平台是蓝色的。更改颜色使用color属性。
  • 如需调节switch大小，可通过css的scale方法调节，如缩小到70%style="transform:scale(0.7)"