switch.md 2.3 KB
Newer Older
Q
qiang 已提交
1 2 3 4 5 6 7 8 9
#### switch

开关选择器。

**属性说明**

|属性名|类型|默认值|说明|平台差异说明|
|:-|:-|:-|:-|:-|:-|
|checked|Boolean|false|是否选中||
10
|disabled|Boolean|false|是否禁用|字节跳动小程序与飞书小程序不支持|
Q
qiang 已提交
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
|type|String|switch|样式,有效值:switch, checkbox||
|@change|EventHandle||checked 改变时触发 change 事件,event.detail={ value:checked}||
|color|Color||switch 的颜色,同 css 的 color| |

**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/switch/switch)
 
```html
<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title">默认样式</view>
			<view>
				<switch checked @change="switch1Change" />
				<switch @change="switch2Change" />
			</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 />
			</view>
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">关闭</view>
				<switch />
			</view>
		</view>
	</view>
</template>
```
 
```javascript
export default {
    data() {
        return {}
    },
    methods: {
        switch1Change: function (e) {
            console.log('switch1 发生 change 事件,携带值为', e.target.value)
        },
        switch2Change: function (e) {
            console.log('switch2 发生 change 事件,携带值为', e.target.value)
        }
    }
}
```

![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/51f6fb50-4f2f-11eb-b680-7980c8a877b8.png)

示例代码说明:以上示例代码从hello uni-app示例中复制,涉及的css样式在hello uni-app的app.vue和uni.css中

预览H5效果:使用浏览器的手机模式访问[https://hellouniapp.dcloud.net.cn/pages/component/switch/switch](https://hellouniapp.dcloud.net.cn/pages/component/switch/switch)

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