switch | uni-app官网

switch

属性

事件

# switch

组件类型：UniSwitchElement

开关选择器

# # 属性

名称	类型	默认值	描述
checked	boolean	-	是否选中
color	string.ColorString	-	switch 的颜色，同 css 的 color
disabled	boolean	-	是否禁用
@change	(event: SwitchChangeEvent) => void	-	checked 改变时触发 change 事件，event.detail={ value:checked}

# # 事件

# # SwitchChangeEvent

# # 构造函数

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

# # SwitchChangeEvent 属性值

名称	类型	必填	默认值	描述
detail	SwitchChangeEventDetail	是	-	-
type	string	是	-	事件类型
target	Element	是	-	触发事件的组件
currentTarget	Element	是	-	当前组件
timeStamp	number	是	-	事件发生时的时间戳

# # SwitchChangeEventDetail 属性值

名称	类型	必备	默认值	描述
ctors	Constructor	是	-	-
value	boolean	是	-	-

# # SwitchChangeEvent 方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

# # 示例

hello uni-app x

<template>
 <view class="uni-padding-wrap">
   <view class="uni-common-mt">
     <view class="uni-title">默认样式</view>
     <view class="flex-row">
       <switch class="switch-checked" :checked="checked" @change="switch1Change" />
       <switch @change="switch2Change" />
       <!-- <text class="switch-checked-value">{{clickCheckedValue}}</text> -->
     </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-pd">
       <view class="uni-list-cell-db">开启中</view>
       <switch :checked="true" />
     </view>
     <view class="uni-list-cell uni-list-cell-pd">
       <view class="uni-list-cell-db">关闭</view>
       <switch />
     </view>
   </view>
 </view>
</template>

<script lang="uts">
 export default {
   data() {
     return {
       title: 'switch 开关',
       checked: true,
       color: '#FFCC33',
       clickCheckedValue: true
     }
   },
   methods: {
     switch1Change: function (e : SwitchChangeEvent) {
       this.clickCheckedValue = e.detail.value
       console.log('switch1 发生 change 事件，携带值为', e.detail.value)
     },
     switch2Change: function (e : SwitchChangeEvent) {
       console.log('switch2 发生 change 事件，携带值为', e.detail.value)
     }
   }
 }
</script>

<style>
 .flex-row {
   flex-direction: row;
 }
</style>