uniapp switch按钮的使用

switch使用官方文档
https://uniapp.dcloud.io/component/switch

想要改变switch按钮的大小

<switch @change="switchChange" color="#3EC3E1" :checked="checkoutInfo.checked" style="zoom:.6" />
<switch @change="switchChange" color="#3EC3E1" :checked="checkoutInfo.checked" />

不同尺寸显示如下：

如果想手动动态改变按钮的开关：

<view v-if="checkoutInfo.isShowEle">
		<switch @change="switchChange" color="#3EC3E1" :checked="checkoutInfo.checked" />
</view>
 //data定义
checkoutInfo: {
	isShowEle: true,
	checked: false,
}, 
//change方法
switchChange(e) {
	// console.log(e)
	var canHandOver = e.detail.value ? 1 : 0
	//调用某个requst接口，可能因网络原因不成功，要强制修改开关
	if (data.data.data.success == false) { //不成功
		this.showMsg(data.data.data.msg)
		this.$set(this.checkoutInfo, "isShowEle", false) //先隐藏switch组件
		this.$set(this.checkoutInfo, "checked", !e.detail.value) //修改checked绑定的变量值
		this.$nextTick(() => {
			setTimeout(() => {
				this.$set(this.checkoutInfo, "isShowEle", true) //显示switch组件
				this.$forceUpdate() //强制更新
			}, 0)
		})
		 return
	}
},